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

• jon21021985: 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