追加数据功能:将JSON内容插入HTML中

Question

我正在按照本教程学习如何将 JSON 中的文本插入网站。我成功地在网站上重建了这个示例 - 但是我很难使用我自己的 JSON，它的结构略有不同。

本教程中的 JSON 如下所示：

[
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
...
]

数组被加载到一个名为data的对象中，我可以使用索引和值的键访问它的每个值，即data[0].firstName将产生"John"(如简短教程中所述)。

现在，我实际想要使用的 JSON 具有以下结构：

{
"Category1": [
{
"name": "Lorem",
"description": "A description",
"product": "a product",
...
}
],
"Category2": [
{
"name": "Lorem1",
"description": "Another description",
"product": "another product",
...
},
{
"name": "Lorem2",
"description": "A third description",
"product": "a third product"
...
},
{
"name": "Lorem3",
"description": "And one last description",
"product": "last product",
....
}
],
"Category3": [
{
...
},
],
...
}

如何访问所有这些值？我试图将data对象视为多维数组(即data[0][1]没有成功。

我正在使用以下函数插入到 HTML 中：

function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data[i].firstName;
mainContainer.appendChild(div);
}
}

另外 - 作为后续问题：有没有办法遍历类别？

Answer 1

按数据调用。对象名称[索引].属性名称

let data = {
"Category1": [
{
"name": "Lorem",
"description": "A description",
"product": "a product",
},
]
}
console.log(data.Category1[0].name);

例如：

let data = {
Category1: [
{
name: "Lorem",
description: "A description",
product: "a product",
},
],
Category2: [
{
name: "Lorem1",
description: "Another description",
product: "another product",
},
{
name: "Lorem2",
description: "A third description",
product: "a third product",
},
],
};
for (x in data) {
for (let i = 0, l = data[x].length; i < l; i++) {
console.log(data[x][i].name);
}
}

Answer 2

嗯...您可以将数组声明为"普通"二维数组，例如：

const data = [
[{ "name": "Lorem", "description": "A description", "product": "a product" }],
[
{ "name": "Lorem1", "description": "A description", "product": "another product" },
{ "name": "Lorem2", "description": "A description", "product": "a third product" }
]
];
console.log(data[0][0]);

如果您无法更改 JSON 结构，您可以使用Object.entiries进行迭代：

const data = {
Category1: [
{
name: "Lorem",
description: "A description",
product: "a product",
},
],
Category2: [
{
name: "Lorem1",
description: "Another description",
product: "another product",
},
{
name: "Lorem2",
description: "A third description",
product: "a third product",
},
],
};
Object.entries(data).forEach((entry) => {
const categoryName = entry[0];
const values = entry[1];
// Replace console.logs with your functions that create div's/insert text/etc
console.log('n');
console.log(categoryName);
values.forEach((value) => {
console.log('===================');
console.log(value.name);
console.log(value.description);
console.log(value.product);
});
})