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からイメージを抽出する方法を見つけようとしていますが、これを行うことはできません。私はちょうど<li>タグとラインに

+ ent.title.image 

を追加することができると思ったが、これは、単に「未定義」と言っリストを返します。

私が画像を抽出する方法の正しい方向に私を指摘する助けがあれば、感謝しています。

おかげで、 スコット

Answer 1

：：だから、あなたは以下のようなものを必要とする

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

注：私は、サービスコールを変更する必要がありhttpsからhttpsへのデモまでhttpsから

[ '：画像IM'] [0] .LABEL、 IMG =

(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>

Answer 2

イメージを持っているプロパティがim:imageです。あなたが例えば

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

のようなJSONから画像を呼び出す必要があり

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