jquery each only outputting first iteration of JSON

Question

Using this code:

$.each(data.toptracks.track, function(index, item){
    $('.lastfm').append('<figure class="clearfix"><p><a href="'+item.url+'">'+item.name+'</a>'+item.artist.name+'</p><div class="vinyl"><img class="recordLabel" src="' + item.image[3]['#text'] + '" /></div></figure>');
});

use this URL to view JSON:

http://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=benhowdle89&api_key=b25b959554ed76058ac220b7b2e0a026&format=json

For some reason only the first iteration(?) gets output!

jSFiddle link: http://jsfiddle.net/MS3Gu/

can you host it on jsfiddle.. atelast a part of the json in runnable state — Baz1nga
– Baz1nga, Commented Aug 21, 2011 at 15:58

user113716 · Accepted Answer · 2011-08-21 16:11:01Z

3

Probably because on the second iteration, the item does not have an image property, so item.image[3]['#text'] will cause it to crash.

{
    "toptracks": {
        "track": [{
            "name": "Someone Like You",
            "duration": "284",
            "playcount": "1033",
            "mbid": "",
            "url": "http:\/\/www.last.fm\/music\/Adele\/_\/Someone+Like+You",
            "streamable": {
                "#text": "1",
                "fulltrack": "0"
            },
            "artist": {
                "name": "Adele",
                "mbid": "b0335a95-8a12-4c71-8149-5054ec847d04",
                "url": "http:\/\/www.last.fm\/music\/Adele"
            },
            "image": [{
                "#text": "http:\/\/userserve-ak.last.fm\/serve\/34s\/55125087.png",
                "size": "small"
            },
            {
                "#text": "http:\/\/userserve-ak.last.fm\/serve\/64s\/55125087.png",
                "size": "medium"
            },
            {
                "#text": "http:\/\/userserve-ak.last.fm\/serve\/126\/55125087.png",
                "size": "large"
            },
            {
                "#text": "http:\/\/userserve-ak.last.fm\/serve\/300x300\/55125087.png",
                "size": "extralarge"
            }],
            "@attr": {
                "rank": "1"
            }
        },
        {
            "name": "Somebody To Love Me (ft. Boy George & Miike Snow)",
            "duration": "298",
            "playcount": "1011",
            "mbid": "",
            "url": "http:\/\/www.last.fm\/music\/Mark%2BRonson%2B%2526%2BThe%2BBusiness%2BIntl\/_\/Somebody%2BTo%2BLove%2BMe%2B%2528ft.%2BBoy%2BGeorge%2B%2526%2BMiike%2BSnow%2529",
            "streamable": {
                "#text": "0",
                "fulltrack": "0"
            },
            "artist": {
                "name": "Mark Ronson & The Business Intl",
                "mbid": "146a66b3-5544-4b7e-9b69-9b53ee30746a",
                "url": "http:\/\/www.last.fm\/music\/Mark%2BRonson%2B%2526%2BThe%2BBusiness%2BIntl"
            },
/* NO IMAGE PROPERTY */
            "@attr": {
                "rank": "2"
            }
        },
// ...

Since there's no image property, when you do item.image it returns undefined, so item.image[3] is attempting to look up the 3 property on undefined.

To remedy it, you can test each level of depth to make sure properties exist.

if( item.image && item.image[3] && item.image[3]['#text'] ) { 
    var txt = item.image[3]['#text']; 
} else { 
    var txt = ''; 
}

edited Aug 21, 2011 at 16:11

answered Aug 21, 2011 at 16:03

user113716

323k64 gold badges454 silver badges441 bronze badges

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

4 Comments

Joseph Silber Over a year ago

+1 That's exactly what my console is giving me: Cannot read property '3' of undefined.

benhowdle89 Over a year ago

oh ok, how do i guard against that?

user113716 Over a year ago

@benhowdle89: You need to test for each property that may or may not exist.

if( item.images && item.image[3] && item.image[3]['#text'] ) { var txt = item.image[3]['#text']; } else { var txt = ''; }

user113716 Over a year ago

...in my comment above, I started the if() with item.images instead of item.image. It is correct in the answer.

Daniel O'Hara · Accepted Answer · 2011-08-21 16:04:29Z

1

It's because the second item in that array just doesn't contain image[3] property.

answered Aug 21, 2011 at 16:04

Daniel O'Hara

13.5k3 gold badges48 silver badges70 bronze badges

Collectives™ on Stack Overflow

jquery each only outputting first iteration of JSON

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related