jqueryを使用してJSONデータをトラバースする別の方法は？

Question

私のウェブサイトに別の記事のニュースタイトルを表示したいのですが（スクリーンショットを参照）、表示できません。ブラウザにはconsole.log(json.length)も表示されません。私はコードを書いたが、それはすべてのニュース記事のタイトルを表示しない私のコードを参照してください。 HTMLで

$(document).ready(function() { 

$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) { 
     console.log(json); 
     console.log(json.length); 

     for(var i = 0 ; i<json.length ; i++){ 
      $(".title").html() = json.articles[i].title;  
     } 

    }); 
}); 

：

<div id="sidebar-wrapper"> 
       <ul class="sidebar-nav"> 
         <strong>Latest Headines</strong> 
        <li> 
         <a href="" class="title">Your news title</a> 
        </li> 
        <li> 
         <a href="" class="title">Your news title</a> 
        </li> 
        <li> 
         <a href="" class="title">Your news title</a> 
        </li> 
        <li> 
         <a href="" class="title">Your news title</a> 
        </li> 
        <li> 
         <a href="" class="title">Your news title</a> 
        </li> 
       </ul> 
      </div> 

ここで私は別のニュース記事のタイトルの代わりに、「あなたのニュースのタイトル」を表示したい私のスクリーンショットです。

$(".title").eq([i]).html(json.articles[i].title); 

Answer 1

へ

Answer 2

変更このライン

$(".title").html() = json.articles[i].title; 

あなたはjson.articles.length代わりのjson.lengthを使用する必要があります。薬品なしで.html()を使用すると、タグのHTMLコードが空になります。あなたは.html()にhtmlコードを渡す必要があります。また、あなたは、インデックスでアクセスする.eq()機能を使用することができます。

$(document).ready(function() { 
    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) { 
     console.log(json); 
     console.log(json.articles.length); 

     for(var i = 0 ; i<json.articles.length ; i++){ 
      $(".title").eq(i).html(json.articles[i].title);  
     } 

    }); 
}); 

Answer 3

var domEl = ''; 

$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) { 
     console.log(json); 
     console.log(json.length); 

     for(var i = 0 ; i<json.length ; i++){ 
      domEl += '<li><a>' + json.articles[i].title + '</a></li>';  
     } 

     $(".title").html(domEl) 

    }); 
});