【发布时间】：2019-04-20 22:29:13
【问题描述】：
我有一个家庭作业，我一直在尝试让 Jquery 将我的 JSON 文件附加到网页上，以便它像列表一样显示 JSON 中的对象，但我得到的只是控制台中的“对象”我得到了完整的 json作为一个数组，如果我使用警报而不是控制台日志，我会得到对象
我为每个和 .append 尝试了一些 jquery 方法，我知道我们需要使用 Jquery 只是不确定什么方法，还尝试了 ajax。我尝试将 json 文件分配给一个 const 变量，然后附加它，但只是得到一个对象，我想要的是对象的键和值的列表
json 文件
[
{ "category": "fruit",
"item": "apples",
"type": "Honey Crisp",
"brand": "Little cuties",
"qty": 10
},
{ "category": "beverage",
"item": "milk",
"type": "2%",
"brand": "generic",
"qty": "1 gallon"
},
{ "category": "pasta",
"item": "Pasta",
"type": "Penne",
"brand": "Barilla",
"qty": 3
},
{ "category": "dessert",
"item": "Gelatin dessert",
"type": "Green",
"brand": "Jello",
"qty": 3
},
{
"category": "dairy",
"item": "Yogurt",
"type": "Assorted flavors",
"brand": "Chobani",
"qty": 12
},
{
"category": "pasta",
"item": "Pasta",
"type": "Linguini",
"brand": "Barilla",
"qty": 3
},
{
"category": "beverage",
"item": "Apple juice",
"type": "regular",
"brand": "Happy Farms",
"qty": 2
},
{
"category": "beverage",
"item": "Vodka",
"type": "Tangerine",
"brand": "Grey Goose",
"qty": 1
}
]
基本代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Coding Project</title>
</head>
<body>
<script>
$.getJSON("groceries.json", function(json) {
console.log(json);
alert(json);
});
fetch.onload = function() {
if(this.status == 200 ) {
var groceries = JSON.parse(this.responseText);
var output = '';
for (var i=0, l=groceries.elements.length; i<l ; i++) {
output += `
<div>
<p>Name : ${groceries.elements[i].brand}</p>
<p>Symbol : ${groceries.elements[i].item}</p>
<p>Number : ${groceries.elements[i].qty}</p>
<p>Number : ${groceries.elements[i].category}</p>
<p>Number : ${groceries.elements[i].type}</p>
</div>
`;
}
$('.data').html(output);
}
}
</script>
</body>
</html>
我能够在控制台中获取 json 数组，但我希望它附加到网页，但到目前为止我只是将“对象对象对象”附加到网页
【问题讨论】：
-
fetch变量来自哪里？好像您正在将 jQuery 与基本 JS 混合用于 ajax 请求，这很奇怪。
标签： javascript jquery json