Parse JSON data using jQuery.getJSON()

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

by mram888

HTML

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

    <hr/>
    <table border="1">
        <tr>
            <td>Username:</td>
            <td id="username"></td>
        </tr>
        <tr>
            <td>Latitude:</td>
            <td id="latitude"></td>
        </tr>
        <tr>
            <td>Latitude:</td>
            <td id="longitude"></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 geocodingAPI = "https://s3.eu-west-1.amazonaws.com/test.local.in/test/reports/data/39fe44e5/geoStats.json";

$.getJSON(geocodingAPI, function (json) {

    console.log(json);
    var username = json.username;
    console.log('Username : ', username);
    
    var latitude = json.receiving;
    console.log('Latitude : ', latitude);
    
    var longitude = json.giving;
    console.log('Longitude : ', longitude);

    // Set the table td text
    $('#username').text(username);
    $('#latitude').text(latitude);
    $('#longitude').text(longitude);
});