我正在尝试在HTML中显示json中的数据。似乎无法正确获取数据。
我在本地主机上运行它，所以我可以正确看到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>最佳答案
我认为问题是您尝试在$ .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>