CODEWITHSUNDEEP
javascriptjqueryjsonimage
Scott Riley
Scott Riley

Reputation: 33

Display an image from JSON using jQuery

I have the following jQuery code at the moment.

Note that to run the snippet here you need to click and allow this first:

https://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topTvEpisodes/json

(function() {
  var iTunesAPI =
    "https://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topTvEpisodes/json";
  $.getJSON(iTunesAPI)
    .done(function(data, textStatus) {
      $.each(data.feed.entry, function(i, ent) {
        $("<li>" + ent.title.label + "</li>").appendTo("#tvshow");
      });
      console.log("Yippee " + textStatus);
    })
    .fail(function(jqxhr, textStatus, error) {
      var err = textStatus + ", " + error;
      console.log("Request Failed: " + err + " " + jqxhr.status);
    })
    .always(function() {
      console.log("Whatever");
    })
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="tvshow">
  <ul>

This displays a list of TV shows with the titles of the TV shows which are numbered into a list. I am currently trying to find a way to extract the image from the JSON using jQuery but I am unable to do so. I thought I could just add

+ ent.title.image

Into the line with the <li> tags but this then just returns a list saying "undefined".

Any help pointing me in the right direction of how I can extract images would be grateful, I am new to jQuery so learning as I go along.

Thanks, Scott

Upvotes: 3

Views: 1361

Answers (2)

Adam Azad
Adam Azad

Reputation: 11297

The property which has the images is im:image. So, you need something like below:

$.each( data.feed.entry, function( i, ent ) {
  var imgUrl = ent['im:image'][ ent['im:image'].length - 1 ].label, // the last index returns the highest resolution.
  img = '<img src="' + imgUrl + '"/>';
  $("<li>" + ent.title.label + '<br/>' + img + "</li>").appendTo("#tvshow");
});

Upvotes: 3

Abhishek Jain
Abhishek Jain

Reputation: 171

you should call image from JSON like 

ent["im:image"][0].label

for example: 

$("<li><img src='"+ ent["im:image"][0].label +"'/>" + ent.title.label + "</li>").appendTo("#tvshow");

Note: I have change the service call from http to https to demo over https fiddle 

(function() {
  var iTunesAPI = 
  "//ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topTvEpisodes/json";
  $.getJSON( iTunesAPI )
    .done(function( data, textStatus ) {
      $.each( data.feed.entry, function( i, ent ) {
        $("<li><img src='"+ ent["im:image"][0].label +"'/>" + ent.title.label + "</li>").appendTo("#tvshow");
      });
      console.log( "Yippee " + textStatus );
    })
    .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ", " + error;
        console.log( "Request Failed: " + err + " " + jqxhr.status );
    })
    .always(function() {
        console.log( "Whatever" );
    })
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tvshow">
</ul>

Upvotes: 3

Related Questions