Javascript 在下面的JSON数组上循环并显示每个项
我有一个家庭作业，我一直试图让Jquery将我的JSON文件附加到网页上，这样它就可以像列表一样显示JSON中的对象，但我在控制台中得到的只是“对象”，我将完整的JSON作为一个数组，如果我使用警报而不是控制台日志，我将得到对象 我为每个和尝试了一些jquery方法。我尝试将json文件分配给一个常量变量，然后将其追加，但刚刚得到一个对象，我想要的是一个对象键和值的列表 json文件Javascript 在下面的JSON数组上循环并显示每个项,javascript,jquery,json,Javascript,Jquery,Json,我有一个家庭作业，我一直试图让Jquery将我的JSON文件附加到网页上，这样它就可以像列表一样显示JSON中的对象，但我在控制台中得到的只是“对象”，我将完整的JSON作为一个数组，如果我使用警报而不是控制台日志，我将得到对象 我为每个和尝试了一些jquery方法。我尝试将json文件分配给一个常量变量，然后将其追加，但刚刚得到一个对象，我想要的是一个对象键和值的列表 json文件 [ { "category": "fruit",
[
{ "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>
编码项目
$.getJSON（“groceries.json”，函数（json）{
log（json）；
警报（json）；
});
fetch.onload=函数（）{
如果（this.status==200）{
var groceries=JSON.parse（this.responseText）；
var输出=“”；
对于（var i=0，l=groceries.elements.length；i您的对象具有内部JSON，因此需要在第二级进行循环。如下所示：
让myJson=[
{
类别：“水果”，
物品：“苹果”，
类型：“蜂蜜酥”，
品牌：“小可爱”，
数量：10
},
{
类别：“饮料”，
物品：“牛奶”，
类型：“2%”，
品牌：“通用”，
数量：“1加仑”
},
{
类别：“意大利面”，
项目：“意大利面”，
类型：“Penne”，
品牌：“Barilla”，
数量：3
},
{
类别：“甜点”，
物品：“明胶甜点”，
键入：“绿色”，
品牌：“果冻”，
数量：3
},
{
类别：“乳制品”，
项目：“酸奶”，
类型：“什锦口味”，
品牌：“Chobani”，
数量：12
},
{
类别：“意大利面”，
项目：“意大利面”，
类型：“Linguini”，
品牌：“Barilla”，
数量：3
},
{
类别：“饮料”，
商品：“苹果汁”，
类型：“常规”，
品牌：“快乐农场”，
数量：2
},
{
类别：“饮料”，
物品：“伏特加”，
字体：“橘子”，
品牌：“灰鹅”，
数量：1
}
];
$.each（myJson，函数（i，项）{
让段落=$（“”），
imgSrc=“”；
开关（项目类别）{
“水果”一案：
imgSrchttps://www.iheartnaptime.net/wp-content/uploads/2017/04/honey-lime-fruit-salad-i-heart-naptime-3-200x200.jpg';
打破
“饮料”一案：
imgSrchttps://tiimg.tistatic.com/categoryimg/v1/1/beverages-399.jpg';
打破
“意大利面”一案：
imgSrchttps://danzadefogones.com/wp-content/uploads/2020/03/Pasta-con-Ajo-y-Aceite.jpg';
打破
“乳制品”案例：
imgSrchttps://paleoleap.com/wp-content/uploads/2010/07/dairy2-s.jpg';
打破
}
段落.附加（“
”）；
$。每个（项目、功能（j、属性）{
段落.附加（“”+j+”：“+property+”
）
});
$（“正文”）。附加（段落）
})；
您的对象具有内部JSON，因此需要在第二级循环。如下所示：
让myJson=[
{
类别：“水果”，
物品：“苹果”，
类型：“蜂蜜酥”，
品牌：“小可爱”，
数量：10
},
{
类别：“饮料”，
物品：“牛奶”，
类型：“2%”，
品牌：“通用”，
数量：“1加仑”
},
{
类别：“意大利面”，
项目：“意大利面”，
类型：“Penne”，
品牌：“Barilla”，
数量：3
},
{
类别：“甜点”，
物品：“明胶甜点”，
键入：“绿色”，
品牌：“果冻”，
数量：3
},
{
类别：“乳制品”，
项目：“酸奶”，
类型：“什锦口味”，
品牌：“Chobani”，
数量：12
},
{
类别：“意大利面”，
项目：“意大利面”，
类型：“Linguini”，
品牌：“Barilla”，
数量：3
},
{
类别：“饮料”，
商品：“苹果汁”，
类型：“常规”，
品牌：“快乐农场”，
数量：2
},
{
类别：“饮料”，
物品：“伏特加”，
字体：“橘子”，
品牌：“灰鹅”，
数量：1
}
];
$.each（myJson，函数（i，项）{
让段落=$（“”），
imgSrc=“”；
开关（项目类别）{
“水果”一案：
imgSrchttps://www.iheartnaptime.net/wp-content/uploads/2017/04/honey-lime-fruit-salad-i-heart-naptime-3-200x200.jpg';
打破
“饮料”一案：
imgSrchttps://tiimg.tistatic.com/categoryimg/v1/1/beverages-399.jpg';
打破
“意大利面”一案：
imgSrchttps://danzadefogones.com/wp-content/uploads/2020/03/Pasta-con-Ajo-y-Aceite.jpg';