jquery loop through json

Question

Hi I am trying to loop through a json file like so:

$.each(data.playlists.playlist, function(i, item) {

              $("#contentC").append('<p>' + item.id + '</p>'); 
              $("#contentC").append('<p>' + item.title + '</p>'); 
              $("#contentC").append('<p>' + item.url + '</p>'); }
           );

json:

{
   "playlists":{
      "playlist":[
         {
            "id":"8391802",
            "title":"Second Playlist",
            "description":"",
            "date":"2011-03-06T18:53:33",
            "size":"10",
            "duration":"2267",
            "streamable":"0",
            "creator":"http:\/\/www.last.fm\/user\/jon21021985",
            "url":"http:\/\/www.last.fm\/user\/jon21021985\/library\/playlists\/4zv5m_second_playlist",
            "image":[
               {
                  "#text":"",
                  "size":"small"
               },
               {
                  "#text":"",
                  "size":"medium"
               },
               {
                  "#text":"",
                  "size":"large"
               },
               {
                  "#text":"",
                  "size":"extralarge"
               }
            ]
         },
         {
            "id":"8372409",
            "title":"All-american Rejects",
            "description":"",
            "date":"2011-02-28T13:30:01",
            "size":"6",
            "duration":"785",
            "streamable":"0",
            "creator":"http:\/\/www.last.fm\/user\/jon21021985",
            "url":"http:\/\/www.last.fm\/user\/jon21021985\/library\/playlists\/4zg6x_all-american_rejects",
            "image":[
               {
                  "#text":"",
                  "size":"small"
               },
               {
                  "#text":"",
                  "size":"medium"
               },
               {
                  "#text":"",
                  "size":"large"
               },
               {
                  "#text":"",
                  "size":"extralarge"
               }
            ]
         }
      ],
      "@attr":{
         "user":"jon21021985"
      }
   }
}

the problem is the data changes if there is only one playlist then I get 'undefined'

   {
   "playlists":{
      "playlist":{
         "id":"1319510",
         "title":"Untitled",
         "description":"",
         "date":"2007-10-18T12:17:58",
         "size":"1",
         "duration":"345",
         "streamable":"0",
         "creator":"http:\/\/www.last.fm\/user\/john",
         "url":"http:\/\/www.last.fm\/user\/john\/library\/playlists\/sa52_",
         "image":[
            {
               "#text":"",
               "size":"small"
            },
            {
               "#text":"",
               "size":"medium"
            },
            {
               "#text":"",
               "size":"large"
            },
            {
               "#text":"",
               "size":"extralarge"
            }
         ]
      },
      "@attr":{
         "user":"john"
      }
   }
}

Praveen Prasad · Accepted Answer · 2011-03-06 19:25:37Z

11

if($.isArray(data.playlists.playlist))
{
             $.each(data.playlists.playlist, function(i, item) {
               displayPlayList(item)
           ); 
}
else
{
      displayPlayList(data.playlists.playlist);
}


    //this way of appending an element is very poor coding practice but 
    //i have done  this way, because u yourself have written this
    // if u want then i can suggest you, how can u optimize this code
    function displayPlayList(item)
    {
                  $("#contentC").append('<p>' + item.id + '</p>'); 
                  $("#contentC").append('<p>' + item.title + '</p>'); 
                  $("#contentC").append('<p>' + item.url + '</p>'); }

    }

Edit

As Emmet has pointed out you should always return array. But its acceptable in scenarios where you are using that party json services and they are returning data in that format, then there is nothing you can do

answered Mar 6, 2011 at 19:25

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

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

1 Comment

jon21021985 Over a year ago

excellent this works fine, thanks for the help. If you can optimise the code that would be great, I only wrote it this way as I am bvery much a beginner with jquery. thanks again...J

Collectives™ on Stack Overflow

jquery loop through json

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related