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"
      }
   }
}

Answer 1

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