Parsing JSON with jQuery

Question

Hey. I am trying to parse some JSON into HTML using jQuery. I’ve checked to see if my API request is working, and it is.

I think it gets stuck when appending the HTML.

$('button').click(function(){
    $.getJSON('http://api.songkick.com/api/3.0/events.json?apikey=MY_API_KEY&location=ip:94.228.36.39', function(data) {
        $('.json').html('<p>' + data.location + '</p>' + '<p>' + data.uri + '</p>');
    });
});

getJson returns loads of data in the following format, but I can’t seem to parse it to HTML.

{
    "resultsPage": {
        "totalEntries": 99,
        "page": 1,
        "results": {
            "event": [
                {
                    "type":"Concert",
                    "location": {
                        "city":"Huddersfield, UK"
                        ,"lng":-1.78333,
                        "lat":53.65},
                    "popularity":0.0,
                    "status":"ok",
                    "uri":"http:\/\/www.songkick.com\/concerts\/4993456-barbirolli-quartet-at-st-pauls-hall?utm_source=2251&utm_medium=partner",
                    "venue":{
                        "uri":"http:\/\/www.songkick.com\/venues\/156338-st-pauls-hall?utm_source=2251&utm_medium=partner",
                        "lng":-1.78333,
                        "displayName":"St. Paul's Hall",
                        "id":156338,
                        "metroArea": etc......

Answer 1

The problem is that the response doesn't have the properties location or uri.

$('button').click(function(){
    $.getJSON('http://api.songkick.com/api/3.0/events.json?...', function(data) {
        // only guessing based on the information provided
        var events = data.resultsPage.results.event;
        for (var i = 0, l = events.length; i < l; i++) {
            $('.json').append('<p>' + events[i].location.city + '</p>'
                + '<p>' + events[i].uri + '</p>');
            });
        }
});

Answer 2

The problem, as I can see, is, that the structure of your JSON is different from what you try to evaluate. It's much deeper nested. So instead of data.location you will need something like data.resultsPage.results.event[0].location.

That means, most probably you are just missing a loop over data.resultsPage.results.event in your code.

Answer 3

The JSON object you gave as an example is several levels deep. To get to the location you will have to nest inside -

var events = data['resultsPage']['results']['event'];
//Actually an array of events
var location = events[0]['location'];
...

Answer 4

Added Ryan's function to show you it does work with the JSON given so something else is missing - here is the plain JS version

<div id="eventDiv"></div>
<script>
var data = {  
  "resultsPage": {    
    "totalEntries": 99,    
    "page": 1,    
    "results": {
      "event": [
        {"type":"Concert",
           "location": { 
             "city":"Huddersfield, UK","lng":-1.78333,"lat":53.65
           },
           "popularity":0.0,
           "status":"ok",
           "uri":"http:\/\/www.songkick.com\/concerts\/4993456-barbirolli-quartet-at-st-pauls-hall?utm_source=2251&utm_medium=partner",
           "venue": {
             "uri":"http:\/\/www.songkick.com\/venues\/156338-st-pauls-hall?utm_source=2251&utm_medium=partner",
             "lng":-1.78333,
             "displayName":"St. Paul's Hall",
             "id":156338
          }
        } 
      ]
    }
  }
}
window.onload=function() {
  var events = data.resultsPage.results.event;
  for (var i = 0, l = events.length; i < l; i++) {
    document.getElementById('eventDiv').innerHTML='<p>' + events[i].location.city + '</p><p>' + events[i].uri + '</p>';
  }
}

</script>