【问题标题】：Loop through an array of nested objects in javascript循环遍历 javascript 中的嵌套对象数组
【发布时间】：2021-11-29 16:04:35
【问题描述】：

我无法打印出数组内部的对象，当我在控制台记录时，这就是我得到的：

console.log(product.categories)

我如何能够遍历这些嵌套对象，我可以像这样单独显示这些对象

<ul>
  <li>Bath</li>
  <li>/bath/</li>
  <li>18</li>
  <li>Shop all</li>
  <li>/shop-all/</li>
  <li>23</li>
</ul>

整个“产品”数据对象如下所示

【问题讨论】：

请以文本形式提供示例数据。
请添加您尝试过的代码以及它给您带来的挑战，以便我们帮助您修复它。
我尝试在 product.categories 对象上使用 Object 条目，如下所示 ` for (const [key, value] of Object.entries(product.categories)) { console.log(${key}: ${value}) ; }` 但我得到的只是“edges: [object Object],[object Object]”
@ScreamoIsDead 因为你在数组上做Object.entries，而不是对象。改为更改 product.categories -> product.categories.edges。你甚至不需要使用 Object.entries。不要忘记将它打印到 html 调用 toString 方法，所以当 object 存在时，toString() 返回 [object Object]

标签： javascript reactjs loops

【解决方案1】：

您可以遍历数组中每个对象的值，从每个对象创建列表项，并将它们附加到列表元素。

let obj = {
  edges: [
    {name: 'Bath', path: '/bath/', entityId: 18},
    {name: 'Shop App', path: '/shop-all/', entityId: 23}
  ]
}
let ul = document.createElement('ul');
for(const x of obj.edges) 
  for(const textContent of Object.values(x))
    ul.append(Object.assign(document.createElement('li'), {textContent}));
document.body.append(ul);

【讨论】：

【解决方案2】：

2 种方式

目前我能想到 2 个解决方案。

.forEach()

如果您想记录数组的各个元素，此解决方案是最佳选择。
更改数组元素有更好的方法，但让我们看一下示例。

const arr = [{ name: "Home", path: "/home" }, { name: "Forums", path: "/forums" }];

arr.forEach((value) => {
    console.log(value);
});
// { name: "Home", path: "/home" }
// { name: "Forums", path: "/forums" }


// You can map it to a new value by doing this

const newArr = [];

arr.forEach((value) => {
    newArr.push(value.name);
});

console.log(newArr);
// ["Home", "Forums"]

.map()

这是我会使用的最佳解决方案。
此方法将单个元素的值更改为函数中返回的值。

const arr = [{ name: "Home", path: "/home" }, { name: "Forums", path: "/forums" }];

const newArr = arr.map((value) => value.name);
console.log(newArr);

// ["Home", "Forums"]
// Notice how the value has changed

解决方案

解决方案如下所示

function YourComponent() {
    const edges = product.categories.edges;
    const products = edges.map((value) => [value.name, value.path, value.entityId.toString()]);

    return (
        {
            products.map((data) => {
                return (
                    <li>data[0]</li>
                    <li>data[1]</li>
                    <li>data[2]</li>
                );
            });
        }
    );
};

【讨论】：