將 object 推入嵌套在對象數組中的對象數組中

Question

我正在嘗試將值“標簽”和“鏈接”推送到“數據”內的 object 中，其中目標是 object，其 id 等於另一個 ZA8CFDE6331BD59EB2AC96F8911C4B6666 的“父”值這些值應該被推入匹配目標 object 的“children”屬性中。 這似乎不起作用。 任何指針？

var data = [
  {
    "id": 0,
    "label": "example page0",
    "link": "/apx/...",
    "icon": "..",
    "parent": null
    "children": null
  },
  {
    "id": 1,
    "label": "example page1",
    "link": "/apx/...",
    "icon": "notes",
    "parent": null
    "children": null
  },
  {
    "id": 2,
    "label": "example page2",
    "link": "/apx/....",
    "icon": "...",
    "parent": null
    "children": null
  },
  {
    "id": 3,
    "label": "example subpage3",
    "link": "/apx/....",
    "icon": "...",
    "parent": 2
    "children": null
  },
  {
    "id": 4,
    "label": "example subpage4",
    "link": "/apx/....",
    "icon": "...",
    "parent": 2
    "children": null
  }]

for (let entry of data) {
  if (entry.parent > 0) {
  var index = data.findIndex(x => x.id == entry.parent);
  data[index].children.push({ label: entry.label, link: entry.link })
  }
  }

預期 output：

[
  {
    "id": 0,
    "label": "example page0",
    "link": "/apx/...",
    "icon": "..",
    "parent": null
    "children": null
  },
  {
    "id": 1,
    "label": "example page1",
    "link": "/apx/...",
    "icon": "notes",
    "parent": null
    "children": null
  },
  {
    "id": 2,
    "label": "example page2",
    "link": "/apx/....",
    "icon": "...",
    "parent": null
    "children": [ 
    { "label": "example subpage3", "link": "/apx/...." },
    { "label": "example subpage4", "link": "/apx/...." }
    ]
  }
]

Answer 1

您可以使用Array.prototype.reduce來實現它。 reduce將遍歷data數組並查找具有parent屬性但不是null的元素，並通過使用id屬性從data數組中查找其父項。

現在您需要檢查children屬性是否存在，如果沒有，您需要創建一個新數組 object 並分配給children屬性，否則只需將 append 分配給現有的children數組：

 const data = [{"id":0,"label":"example page0","link":"/apx/...","icon":"..","parent":null,"children":null},{"id":1,"label":"example page1","link":"/apx/...","icon":"notes","parent":null,"children":null},{"id":2,"label":"example page2","link":"/apx/....","icon":"...","parent":null,"children":null},{"id":3,"label":"example subpage3","link":"/apx/....","icon":"...","parent":2,"children":null},{"id":4,"label":"example subpage4","link":"/apx/....","icon":"...","parent":2,"children":null}] const res = data.reduce((acc, entry, idx, data) => { if (entry.parent > 0) { const matchingParent = data.find(e => e.id === entry.parent); if (matchingParent) { const child = { label: entry.label, link: entry.link }; if (matchingParent.children) { matchingParent.children.push(child) } else { matchingParent.children = [child]; } } } else { acc.push(entry); } return acc; }, []); console.log(res);

你也可以使用for..of循環來做到這一點：

 const data = [{"id":0,"label":"example page0","link":"/apx/...","icon":"..","parent":null,"children":null},{"id":1,"label":"example page1","link":"/apx/...","icon":"notes","parent":null,"children":null},{"id":2,"label":"example page2","link":"/apx/....","icon":"...","parent":null,"children":null},{"id":3,"label":"example subpage3","link":"/apx/....","icon":"...","parent":2,"children":null},{"id":4,"label":"example subpage4","link":"/apx/....","icon":"...","parent":2,"children":null}]; const acc = []; for (let entry of data) { if (entry.parent > 0) { const matchingParent = data.find(e => e.id === entry.parent); if (matchingParent) { const child = { label: entry.label, link: entry.link }; if (matchingParent.children) { matchingParent.children.push(child) } else { matchingParent.children = [child]; } } } else { acc.push(entry); } } console.log(acc);

這是需要就地進行處理的時候。 在這種情況下，我們找到具有非空parents元素的元素，我們可以將它們作為children元素添加到parent元素，並使用splice從data數組中刪除它們。

在splice時向后迭代將更改數據數組的length屬性：

 const data = [{"id":0,"label":"example page0","link":"/apx/...","icon":"..","parent":null,"children":null},{"id":1,"label":"example page1","link":"/apx/...","icon":"notes","parent":null,"children":null},{"id":2,"label":"example page2","link":"/apx/....","icon":"...","parent":null,"children":null},{"id":3,"label":"example subpage3","link":"/apx/....","icon":"...","parent":2,"children":null},{"id":4,"label":"example subpage4","link":"/apx/....","icon":"...","parent":2,"children":null}]; for (let i = data.length - 1; i>= 0; i--) { const entry = data[i]; if (entry.parent > 0) { const matchingParent = data.find(e => e.id === entry.parent); if (matchingParent) { const child = { label: entry.label, link: entry.link }; if (matchingParent.children) { matchingParent.children.push(child) } else { matchingParent.children = [child]; } data.splice(i, 1); } } } console.log(data);