Вставьте данные из 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> 

А затем добавить HTML в этот контейнер

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); 

Если я понимаю вашу проблему правильно, вот и все.

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);