Parse JSON data using jQuery.getJSON()

A simple demo to show how we can parse JSON data using jQuery.getJSON()

by brandon_rmsy

HTML

<div id="body">
    
<h1>Parse JSON data using jQuery.getJSON()</h1>

    <hr/>
    <table border="1">
        <tr>
            <td>Url:</td>
            <td><a class="myLink">The CF Insights API</a> 
            </td>
        </tr>
        <tr>
            <td>id:</td>
            <td id="id"></td>
        </tr>
        <tr>
            <td>url:</td>
            <td id="url"></td>
        </tr>        
        <tr>
            <td>domain:</td>
            <td id="domain"></td>
        </tr>
        <tr>
            <td>title:</td>
            <td id="title"></td>
        </tr>
    </table>
</div>

CSS

body {
    font-size: 75%;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
}
#body {
    clear: both;
    margin: 0 auto;
    max-width: 534px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
    margin-top:35px;
}
#body td {
    padding:15px 30px 15px 10px;
}
#body tr td:nth-child(1) {
    font-weight:bold;
}
#address {
    width:400px;
}

JavaScript

// The Google Geocoding API url used to get the JSON data
var insightsAPI = "http://classifinity.com/api/v1/feed?format=json&num=10&q=classifinity_impression_i:%5B1%20TO%20*%5D";
var content = "";
$.getJSON(insightsAPI, function (json) {

   // Set the variables from the results array
    var id = json.response.docs[0].id;
    console.log('id : ', id);
    
    var domain = json.response.docs[0].domain_s;
    console.log('domain : ', domain);
    
    var title = json.response.docs[0].title_txt_en_split;
    console.log('title : ', title);

    var url = json.response.docs[0].url_txt_en_split;
    console.log('url : ', url);
    

    // Set the table td text
    $('#id').text(id);
    $('#domain').text(domain);
    $('#title').text(title);
    $('#url').text(url);    

});

// Caching the link jquery object
var $myLink = $('a.myLink');

// Set the links properties
$myLink.prop({
    href: insightsAPI,
    title: 'Click on this link to open in a new window.'
}).click(function (e) {
    e.preventDefault();
    window.open(this.href, '_blank');
});