jQueryを使用してデータを表示すると、私のループは動作しませんが、ブラウザのコンソールではなぜ動作しませんか？

Question

発行する前に：

私はデータを表示するためにconsole.logを使用してループを実行すると、それが動作します。私は別のヘッドラインを取得し、それに対応するスニペットを以下に示します。しかし、jQueryをインクルードすると見出しが繰り返され、スニペットは表示されません。問題（サムネイル画像やURLのリンクが含まれます）を更新

：私はNY TIMES APIを使用していますが、私は記事を一覧表示されますループを記述しようとしています

を。

1. 彼らは

にリンクされていることを見出し

スニペット

サムネイル画像

NY TIMESのURL私はのために書かれたループのさまざまなバリエーションを試してみました記事Headlinesとth eirスニペットを使用してサムネイル画像とNY TIMES Urlを取得できますが、運が上がらない、コンソールにスローされるエラーもありません。以下は

https://jsfiddle.net/m15xg45j/

このための私のJSです：

は、ここでJSONのAPIデータを含むJSFiddleです。

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json"; 

url += '?' + $.param({ 
    'api-key' : "67dac4e994164fca920f7a8420e28dc2", 
    'q' : "health" 
}); 

$.ajax({ 
    url: url, 
    method: 'GET', 
}).done(function(result){ 

    var articles = result.response.docs; 

    for(var i=0; i<articles.length; i++){ 
     $("h2").each(function(index, el){ 
     $(el).html(articles[index].headline.main); 
     }); 

     $("figcaption").each(function(index, el){ 
     $(el).html(articles[index].snippet); 
     }); 

     $("img").each(function(index, el){ 
     $(el).html(articles[index].multimedia.url); 
     }); 

     $("a").each(function(index, el){ 
     $("href").attr(articles[index].web_url) 
     }); 
    } 
}).fail(function(err){ 
    throw err; 
}); 

、ここでは、私はあなたのgetメソッドの応答を認識していないですHTML

<div> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg02.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg02.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg03.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg03.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg04.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg04.jpg" alt=""> 
     <figcaption> 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg05.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg05.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg06.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg06.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg07.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg07.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua 
     </figcaption> 
    </figure> 
    </a> 
    <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg08.jpg"> 
    <h2>Headline</h2> 
    <figure> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg08.jpg" alt=""> 
     <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit 
     </figcaption> 
    </figure> 
    </a> 
</div> 

Answer 1

@ user3112619で説明したように、毎回値を上書きしています。テンプレートメソッドを使用したくない場合（これを考慮する必要があります）、これは今すぐ修正されます -

var articles = result.response.docs; 
$("h2").each(function(index, el) { 
    $(el).html(articles[index].headline.main); 
}); 
$("figcaption").each(function(index, el) { 
    $(el).html(articles[index].snippet); 
}); 

Answer 2

です。しかし、$（ "someSelector"）で試すことができますか？append（ "Sample Response"）; ？

Answer 3

問題は行にある：

$("h2").html(articles[i].headline.main); 

forループを通してあなたがループするたびに、その行はALL H2要素のHTMLを設定します。したがって、最後の繰り返しでは、すべてのH2要素のhtmlが最後の記事に設定されます。あなたが検討する必要があります

：

var parent = $('.headline-collection'); 

for(var i=0; i<articles.length; i++) { 
    var headline = $('<h2>' + articles[i].headline.main + '</h2>'); 
    parent.append(headline); 
} 

その内部のHTMLテンプレート「VARの見出し...」ラインは、あなたの全体の記事可能性があり、おそらく別の「工場」スタイルの方法に分割する必要があります。