APIからDOMにデータを挿入する

Question

APIからデータを取得して、私のブートストラップのレイアウトに入れたいと思っています。

$.ajax({ 
 
    url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>' 
 
}).done(function(data) { 
 
    console.log(data); 
 

 
    var html = ""; 
 
    $.each(data.results, function(index, item) { 
 
    html += "<div class='row'>"; 
 
    html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>"; 
 
    html += "<span class='item-description'>" + item.description + "</span>"; 
 
    html += "</div>"; 
 
    }); 
 

 
    setTimeout(function() { 
 
    $(".container").append(html); 
 
    }, 1500); 
 
});

私はこれを試してみましたが、それは動作していませんか？どうして？

Answer 1

DOMにマークアップを追加するコンテナを追加するだけです。その後、

<div class="js-table-container"></div> 

と私は正しくあなたの問題を理解していれば、それがすべてだ。このコンテナに

var html = ""; 
$.each(data.results, function(index, item) { 
html += "<div class='row'>"; 
html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>"; 
html += "<span class='item-description'>" + item.description + "</span>"; 
html += "</div>"; 
}); 
$('.js-table-container').html(html); 

をHTMLを追加します。

Answer 2

Domの要素の前後にあるこのデータがjqueryのinsertAfterまたはinsertBeforeを使用する場合は、なぜタイムアウト機能を使用していますか？ 処理後にDomに直接追加することができます。

>  $.ajax({ 
>  url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>' 
>  }).done(function(data) { 
>  console.log(data); 
>  
>  var html = ""; 
>  $.each(data.results, function(index, item) { 
>   html += "<div class='row'>"; 
>   html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>"; 
>   html += "<span class='item-description'>" + item.description + "</span>"; 
>   html += "</div>"; 
>  }); 
>  // if you want to load all data inside this container use html 
>   $(".container").html(html); 
>  // if you want to load after this 
>  $(".container").insertAfter(html); 
>  // if you want before this 
>  $(".container").insertBefore(html);