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

如果我正确理解你的问题，就这样了。