jQuery getting a picture url from JSON array

Question

I'm using YQL to get a New York Times JSON feed. I tried to get a thumbnail by following this thread's approach: <img src="' + ( doc.multimedia[0].url || '' )+ '" /> but got ypeError: Cannot read property '0' of undefined. May I know how to get the first thumbnail for those that have the array?

"docs": [{
           "headline": {
               "main": "AP Source: Jackson to Be Introduced by Knicks",
               "print_headline": "AP Source: Jackson to Be Introduced by Knicks"
           }
       }, {
           "headline": {
               "main": "Every Dog Has Its Data ",
               "kicker": "Well",
               "print_headline": "With Technology, Every Dog Has Its Data"
           },
           "multimedia": [{
               "width": "190",
               "url": "images/2014/03/11/science/11PETS1_SPAN/11PETS1-thumbWide.jpg",
               "height": "126",
               "subtype": "wide",
               "legacy": {
                   "wide": "images/2014/03/11/science/11PETS1_SPAN/11PETS1-thumbWide.jpg",
                   "wideheight": "126",
                   "widewidth": "190"
               },
               "type": "image"
           }, {
               "width": "600",
               "url": "images/2014/03/11/science/11PETS2/11PETS2-articleLarge.jpg",
               "height": "338",
               "subtype": "xlarge",
               "legacy": {
                   "xlargewidth": "600",
                   "xlarge": "images/2014/03/11/science/11PETS2/11PETS2-articleLarge.jpg",
                   "xlargeheight": "338"
               },
               "type": "image"
           }, {
               "width": "75",
               "url": "images/2014/03/11/science/11PETS3/11PETS3-thumbStandard.jpg",
               "height": "75",
               "subtype": "thumbnail",
               "legacy": {
                   "thumbnailheight": "75",
                   "thumbnail": "images/2014/03/11/science/11PETS3/11PETS3-thumbStandard.jpg",
                   "thumbnailwidth": "75"
               },
               "type": "image"
           }]
       },

My code:

 $(data.query.results.json.response.docs).each(function (index, doc) {

     item_html += '<li>' + doc.headline.main + '<p><img src="' + (doc.multimedia[0].url || '') + '" /></li>';

 });

Not every headline have an image as your JSON shown, doc.multimedia can be undefined in that case. — Jixun
– Jixun, Commented Mar 15, 2014 at 10:06

Patrick Evans · Accepted Answer · 2014-03-15 10:18:07Z

1

Since not each object of the docs array has a multimedia property you need to check that it is there first

$(data.query.results.json.response.docs).each(function (index,doc) {    
    item_html += '<li>' +doc.headline.main;
    if(doc.multimedia && doc.multimedia[0]){
        item_html+='<p><img src="' + ( doc.multimedia[0].url || '' )+ '" /></p>';
    }
    item_html += '</li>';
});

You could also use this shortcut

item_html += '<li>' + doc.headline.main + '<p><img src="' + ( (doc.multimedia && doc.multimedia[0]) ? doc.multimedia[0].url : '' ) + '" /></li>';

it uses the if shortcut condition ? true statement : false statement;

edited Mar 15, 2014 at 10:18

answered Mar 15, 2014 at 10:08

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

2 Comments

RedGiant Over a year ago

Thank you. It works. I thought using ' + ( doc.multimedia[0].url || '' )+ ' would be enough to check if the array is empty.

Patrick Evans Over a year ago

@user35295, no that just checks if url is empty, added in a one line shortcut that you could use.

Collectives™ on Stack Overflow

jQuery getting a picture url from JSON array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related