Ajax json正确显示数据

Question

我正在尝试在HTML中显示json中的数据。它似乎没有正确获取数据。 我在我的localhost上运行它所以我可以正确地看到json。在我的演示中，json托管在我的个人FTP上。

• 如何在HTML中显示数据？

$(function() {
  ajaxJS();
  function ajaxJS(e) {
    if (e) {
      e.preventDefault();
    }
    $.ajax({
      url: "http://www.domenghini.com/sample-data.json",
      method: "GET",
      success: function(data) {
        console.log(data);
        var html_to_append = '';
        $.each(data.items, function(i, items) {
          html_to_append +=
            '<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
            name.first +
            '<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
            name.last +
            '</p></div><img  class="image img-fluid" src="' +
            picture +
            '" /><p class="company">' +
            company +
            '</p></div>';
        });
        $("#items-container").html(html_to_append);
      },
      error: function() {
        console.log(data);
      }
    });

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
	<div id="items-container" class="row"></div>
</div>

Answer 1

我认为问题是您试图访问$ .each中的name.first name.last而未指定items.name.first

$(function() {
  ajaxJS();
  function ajaxJS(e) {
    if (e) {
      e.preventDefault();
    }
    $.ajax({
      url: "http://www.domenghini.com/sample-data.json",
      method: "GET",
      success: function(data) {
        console.log(data);
        var html_to_append = '';
        $.each(data, function(i, item) {
          html_to_append +=
            '<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
            item.name.first +
            '<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
            item.name.last +
            '</p></div><img  class="image img-fluid" src="' +
            item.picture +
            '" /><p class="company">' +
            item.company +
            '</p></div>';
        });
        $("#items-container").html(html_to_append);
      },
      error: function() {
        console.log(data);
      }
    });

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
	<div id="items-container" class="row"></div>
</div>