Parsing JSON in javascript using jQuery

Question

I'm pulling my hair out over this. I am using jQuery.getJSON() method to get a response from a server. This is an example reponse:

{
  "playlist": {
      "track": {
          "song": "Wake me up",
          "albumart": "http://example.com/image.png",
          "videoid": "CDsKBof4iMA"
      }
  }
}

There will be more than one track in the response, but only one playlist. I am requesting this using the following:

$.getJSON("api/playlist/get.php", {artist: "artist+name" })

How do I go about parsing this data?

You need to add a success function to your getJSON call. The JSON string will parse to an object that you can then access it's properties as you would any other JS object. The jquery api for getJSON has an example: api.jquery.com/jQuery.getJSON — scrappedcola
– scrappedcola, Commented Oct 28, 2013 at 16:50

zur4ik · Accepted Answer · 2013-10-28 17:36:17Z

1

Let's say your JSON result is like this:

{

    "playlist": {
        "track": {
            "song": "Wake me up",
            "albumart": "http://example.com/image.png",
            "videoid": "CDsKBof4iMA"
        },
        "track": {
            "song": "Wake me up 2",
            "albumart": "http://example.com/image2.png",
            "videoid": "CDsKBof4iMA2"
        },
        "track": {
            "song": "Wake me up 3",
            "albumart": "http://example.com/image3.png",
            "videoid": "CDsKBof4iMA3"
        }
    }
}

UPDATE:

This json is invalid format, because it has multiple sub-objects with same property name. If you are able, change response from server into this format:

{
    playlist: {
        tracks: [{
            "song": "Wake me up",
            "albumart": "http://example.com/image.png",
            "videoid": "CDsKBof4iMA"
        }, {
            "song": "Wake me up 2",
            "albumart": "http://example.com/image2.png",
            "videoid": "CDsKBof4iMA2"
        }, {
            "song": "Wake me up 3",
            "albumart": "http://example.com/image3.png",
            "videoid": "CDsKBof4iMA3"
        }]
    }
}

Then you'll be able to get each track object from passed Array:

You should use you $.getJSON function like this:

$.getJSON("api/playlist/get.php", function (data) {

    for (var key in myObj.playlist.tracks) {
        //do something with your track object
        console.log(myObj.playlist.tracks[key].song)
    }

})

Here is JsFiddle for you: http://jsfiddle.net/zur4ik/Fy6ud/1/

edited Oct 28, 2013 at 17:36

answered Oct 28, 2013 at 16:59

zur4ik

6,2749 gold badges57 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Walker Over a year ago

I keep getting undefined error which is on the console.log() line

zur4ik Over a year ago

@JamesWalker I just updated my post. You get undefined, because your JSON response is in invalid format. It has multiple objects with same property name. If you are able to change JSON sender file from server, then change it into correct format, as suggested: put objects into array.

James Walker Over a year ago

Thanks a lot! I never even thought that the JSON response may have been incorrect.

Lars Anundskås · Accepted Answer · 2013-10-28 16:51:43Z

0

Try this:

$.getJSON("api/playlist/get.php", function(data) {
    var responseObject = JSON.parse(data);
    // do stuff with responseObject
});

answered Oct 28, 2013 at 16:51

Lars Anundskås

1,3551 gold badge10 silver badges25 bronze badges

Comments

Adam Rackis · Accepted Answer · 2013-10-28 16:51:47Z

0

Use $.parseJSON() to get a JavaScript object of the JSON. http://api.jquery.com/jQuery.parseJSON/

edited Oct 28, 2013 at 16:51

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

answered Oct 28, 2013 at 16:50

summerbulb

5,9098 gold badges41 silver badges85 bronze badges

1 Comment

scrappedcola Over a year ago

You don't need to use parseJSON if you use getJSON as it returns an object in the success function.

Litmus · Accepted Answer · 2013-10-28 16:52:15Z

0

As per the documentation,

 jQuery.getJSON( url [, data ] [, success( data, textStatus, jqXHR ) ] )

In this, the success( data, textStatus, jqXHR ) is the callback if the JSON load was successful

answered Oct 28, 2013 at 16:52

Litmus

11.1k6 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

Parsing JSON in javascript using jQuery

4 Answers 4

UPDATE:

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

UPDATE:

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related