JS嵌套对象键到数组

Question

{
    "CLASSIQUES": {
        "ANGULES": {
            "INDEXES": {},
            "NON INDEXES":{}
        },
        "DROITS": {
            "INDEXES": {},
            "NON INDEXES": {}
        }
    },
    "ETROITS": {
        "ANGULES": {},
        "DROITS": {}
    }
}

大家好，

我正在做一个电子商务网站。 对于每组产品，我都有一个这样的对象。 它指的是产品目录的不同级别和子级别，我想在列表中显示这些键以保持对象的层次顺序。 我在 Object.entries 上尝试了一个 forEach 方法来获取一个数组，但我似乎无法弄清楚。 这是我要显示的示例：

• 经典
  • 角
    • 索引
    • 非索引
  • 领域
    • 索引
    • 非索引
• 埃特律斯
  • 角
  • 领域

谢谢你的帮助

Answer 1

在 JavaScript 中，您可以很容易地递归地创建嵌套列表。

通过访问对象的条目，您可以使用键附加一个新的列表项，并通过访问条目值来附加子项。

注意：相同的代码（只需很少的修改）可以毫不费力地移植到 React。

 const data = { "CLASSIQUES": { "ANGULES": { "INDEXES": {}, "NON INDEXES": {} }, "DROITS": { "INDEXES": {}, "NON INDEXES": {} } }, "ETROITS": { "ANGULES": {}, "DROITS": {} } }; const createList = (data) => { const entries = Object.entries(data); if (entries && entries.length) { const ul = document.createElement('UL'); entries.forEach(([key, value]) => { const li = document.createElement('LI'); const children = createList(value); li.textContent = key; if (children) li.append(children); ul.append(li); }); return ul; } return null; } document.body.append(createList(data));