check if the src of image in a json file is empty using jquery

Question

I am trying to get images from Google using Google Knowledge Graph Search API Link in javascript and jQuery. The returned json file from Google is similar to this one below:

{
  "@context": {
    "@vocab": "http://schema.org/",
    "goog": "http://schema.googleapis.com/",
    "resultScore": "goog:resultScore",
    "detailedDescription": "goog:detailedDescription",
    "EntitySearchResult": "goog:EntitySearchResult",
    "kg": "http://g.co/kg"
  },
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "EntitySearchResult",
      "result": {
        "@id": "kg:/m/0dl567",
        "name": "Taylor Swift",
        "@type": [
          "Thing",
          "Person"
        ],
        "description": "Singer-songwriter",
        "image": {
          "contentUrl": "https://t1.gstatic.com/images?q=tbn:ANd9GcQmVDAhjhWnN2OWys2ZMO3PGAhupp5tN2LwF_BJmiHgi19hf8Ku",
          "url": "https://en.wikipedia.org/wiki/Taylor_Swift",
          "license": "http://creativecommons.org/licenses/by-sa/2.0"
        },
        "detailedDescription": {
          "articleBody": "Taylor Alison Swift is an American singer-songwriter and actress. Raised in Wyomissing, Pennsylvania, she moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music. ",
          "url": "http://en.wikipedia.org/wiki/Taylor_Swift",
          "license": "https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License"
        },
        "url": "http://taylorswift.com/"
      },
      "resultScore": 896.576599
    }
  ]
}

The main part of javascript code for this purpose is as below:

<script>
        var service_url = 'https://kgsearch.googleapis.com/v1/entities:search';
        var params = {
            'query': 'Taylor Swift',
            'limit': 10,
            'indent': true,
            'key' : 'AIzaSyBpCW-EUz2EqI8YIjmQYYXwTzZu8kXGPEw',
        };
        var img;
        $.getJSON(service_url + '?callback=?', params, function(response) {
            $.each(response.itemListElement, function(i, element) {           
               img = $('<img>', {
                    src: element['result']['image']['contentUrl']
                    });    
                if ($(img).attr('src') !== '') {
                    img.appendTo(document.body);
                    }          
                else {
                    $('body').html('<p>image is not available</p>'); 
                }
            });
        });
</script>

As you can see from the javascript code, I am trying to get 10 images from Google Knowledge Graph. However, not all of images are available in Google Knowledge Graph， i.e., some urls of them maybe are empty. I want to check if the url of image is not empty, the image will be added to document.body; otherwise, an error message such as image is not available will be added. The problem is this sentence below doesn't work for me.

if ($(img).attr('src') !== '')   

I only got the first image and then the loop stopped moving to check the rest. Can anyone please point a direction for me? I've googled a lot without any luck. Thanks a lot in advance.

Answer 1

Check Fiddle

JS:

var service_url = 'https://kgsearch.googleapis.com/v1/entities:search';
        var params = {
            'query': 'Taylor Swift',
            'limit': 10,
            'indent': true,
            'key' : 'AIzaSyBpCW-EUz2EqI8YIjmQYYXwTzZu8kXGPEw',
        };
        var img;
        $.getJSON(service_url + '?callback=?', params, function(response) {
            $.each(response.itemListElement, function(i, element) { 
            if(typeof element.result.image !== 'undefined')
            {
               img = $('<img>', { src: element.result.image.contentUrl });    
                if ($(img).attr('src') !== '') {
                    img.appendTo(document.body);
                    $('body').append('</br>'); 
                    }          

                }
                else {
                    $('body').append('<p>image is not available</p></br>'); 
                }
            });
        });

Answer 2

if(element['result']['image']['contentUrl'] != null) {
       //add image
       src = element['result']['image']['contentUrl'];
}  else {
         //show "image is not available" text
}