CODEWITHSUNDEEP
javascriptjqueryjson
Alex Vince
Alex Vince

Reputation: 69

Parsing JSON with jQuery

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......

Upvotes: 0

Views: 606

Answers (5)

shovelshed
shovelshed

Reputation: 82

I had the same issue here. The problem was with the syntax of the nested data.

I changed:

+ events.location.city +

To:

+ events.location['city'] +

For each of the required fields that were nested. For un-nested, just drop the brackets:

+ events.uri +

Upvotes: 0

mplungjan
mplungjan

Reputation: 177691

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>

Upvotes: 0

Eran Galperin
Eran Galperin

Reputation: 86805

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'];
...

Upvotes: 1

Boldewyn
Boldewyn

Reputation: 82734

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.

Upvotes: 1

Ryan Tenney
Ryan Tenney

Reputation: 1841

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>');
            });
        }
});

Upvotes: 1

Related Questions