Display an image from JSON using jQuery

Question

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

There is not image attribute on the title

mplungjan
– mplungjan

2017-09-30 10:42:06 +00:00
Commented Sep 30, 2017 at 10:42 — mplungjan
– mplungjan, Commented Sep 30, 2017 at 10:42

Abhishek Jain · Accepted Answer · 2017-09-30 10:58:40Z

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>

Shiladitya · Accepted Answer · 2017-09-30 16:36:16Z

3

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");
});

edited Sep 30, 2017 at 16:36

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Sep 30, 2017 at 10:39

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

2 Comments

mplungjan Over a year ago

You have some typos and not all have 3 images

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

Adam Azad Over a year ago

@mplungjan thanks, I made few changes to select the last index based on the length of the array. I did not emphasize on how OP would represent the data, but a line break could be useful there.

Collectives™ on Stack Overflow

Display an image from JSON using jQuery

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related