javascript - 使用 jQuery 显示来自 JSON 的图像

Question

目前我有以下 jQuery 代码。

请注意，要在此处运行代码段，您需要先单击并允许:

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>

这将显示一个电视节目列表，其中电视节目的标题已编号到列表中。我目前正在尝试找到一种使用 jQuery 从 JSON 中提取图像的方法，但我无法这样做。我以为我可以添加

+ ent.title.image

与<li>成行标签，但这只会返回一个列表，上面写着“未定义”。

任何能为我指明如何提取图像的正确方向的帮助都将不胜感激，我是 jQuery 的新手，所以边学边学。

谢谢，斯科特

Answer 1

你应该从 JSON 中调用图像

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

例如:

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

注意:我已将服务调用从 http 更改为 https 以通过 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>