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>';

 });

Answer 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;