如何將物件陣列減少到所需的格式？-有解無憂

我在陣列中正確分組物件時遇到問題。

我有一個這種格式的陣列：

const places = [
  {
    id: 1,
    name: "p 1",
    icon: "icon-p",
    parent_id: null,
  },
  {
    id: 2,
    name: "p 2",
    icon: "icon-p",
    parent_id: 1,
  },
  {
    id: 3,
    name: "p 3",
    icon: "icon-p",
    parent_id: 1,
  },
  {
    id: 4,
    name: "t 1",
    icon: "icon-t",
    parent_id: null,
  },
  {
    id: 5,
    name: "t 2",
    icon: "icon-t",
    parent_id: 4,
  },
  {
    id: 6,
    name: "t 3",
    icon: "icon-t",
    parent_id: 4,
  },
  {
    id: 7,
    name: "a 1",
    icon: "icon-a",
    parent_id: null,
  },
  {
    id: 8,
    name: "b 1",
    icon: "icon-b",
    parent_id: null,
  },
  {
    id: 9,
    name: "h 1",
    icon: "icon-h",
    parent_id: null,
  },
  {
    id: 11,
    name: "h 2",
    icon: "icon-h",
    parent_id: 9,
  },
  {
    id: 12,
    name: "h 3",
    icon: "icon-h",
    parent_id: 9,
  },
  {
    id: 13,
    name: "h 4",
    icon: "icon-h",
    parent_id: 9,
  },
];


const groupReultsByIcon = places.reduce((r, { icon, ...object }) => {
  let temp = r.find((o) => o.icon === icon);
  if (!temp) r.push((temp = { icon, children: [] }));
  temp.children.push(object);
  return r;
}, []);


groupReultsByIcon.forEach(({ icon, children }) => {
  console.log('icon-name: ', icon);
  console.log('children-array: ', children);
});

不幸的是，到目前為止，我設法準備的代碼僅按圖示分組。

我正在嘗試獲得這樣的陣列：

const newArrayObject = [
  {
    id: 1,
    icon: "icon-p",
    children: [
      {
        id: 1,
        name: "p 1",
        icon: "icon-p",
        parent_id: null,
      },
      {
        id: 2,
        name: "p 2",
        icon: "icon-p",
        parent_id: 1,
      },
      {
        id: 3,
        name: "p 3",
        icon: "icon-p",
        parent_id: 1,
      },
    ],
  },
  {
    id: 4,
    icon: "icon-t",
    children: [
      {
        id: 4,
        name: "t 1",
        icon: "icon-t",
        parent_id: null,
      },
      {
        id: 5,
        name: "t 2",
        icon: "icon-t",
        parent_id: 4,
      },
      {
        id: 6,
        name: "t 3",
        icon: "icon-t",
        parent_id: 4,
      },
    ],
  },
  {
    id: 7,
    icon: "icon-a",
    children: [
      {
        id: 7,
        name: "a 1",
        icon: "icon-a",
        parent_id: null,
      },
    ],
  },
  {
    id: 8,
    icon: "icon-b",
    children: [
      {
        id: 8,
        name: "b 1",
        icon: "icon-b",
        parent_id: null,
      },
    ],
  },
  {
    id: 9,
    icon: "icon-h",
    children: [
      {
        id: 9,
        name: "h 1",
        icon: "icon-h",
        parent_id: null,
      },
      {
        id: 11,
        name: "h 2",
        icon: "icon-h",
        parent_id: 9,
      },
      {
        id: 12,
        name: "h 3",
        icon: "icon-h",
        parent_id: 9,
      },
      {
        id: 13,
        name: "h 4",
        icon: "icon-h",
        parent_id: 9,
      },
    ],
  },
];

如您所見，分組應該遵循 parent_id 和 id 一個物件 parent_id === null 應該有孩子，它本身以及具有其 id 的物件。

uj5u.com熱心網友回復：

使用Array.reduce()，可以如下完成：

const places = [
  {
    id: 1,
    name: "p 1",
    icon: "icon-p",
    parent_id: null,
  },
  {
    id: 2,
    name: "p 2",
    icon: "icon-p",
    parent_id: 1,
  },
  {
    id: 3,
    name: "p 3",
    icon: "icon-p",
    parent_id: 1,
  },
  {
    id: 4,
    name: "t 1",
    icon: "icon-t",
    parent_id: null,
  },
  {
    id: 5,
    name: "t 2",
    icon: "icon-t",
    parent_id: 4,
  },
  {
    id: 6,
    name: "t 3",
    icon: "icon-t",
    parent_id: 4,
  },
  {
    id: 7,
    name: "a 1",
    icon: "icon-a",
    parent_id: null,
  },
  {
    id: 8,
    name: "b 1",
    icon: "icon-b",
    parent_id: null,
  },
  {
    id: 9,
    name: "h 1",
    icon: "icon-h",
    parent_id: null,
  },
  {
    id: 11,
    name: "h 2",
    icon: "icon-h",
    parent_id: 9,
  },
  {
    id: 12,
    name: "h 3",
    icon: "icon-h",
    parent_id: 9,
  },
  {
    id: 13,
    name: "h 4",
    icon: "icon-h",
    parent_id: 9,
  },
];

const result = places.reduce((prev, curr) =>  {
  const parent = prev.find(p => p.id === curr.parent_id);
  if (parent) {
    if (!parent.children) {      
      parent.children = [];
    }
    parent.children.push(curr);
  } else {
    prev.push(curr);
  }  
  return prev;
}, []);

console.log(result);

uj5u.com熱心網友回復：

您可以檢查一個級別的孩子，然后添加到它。這將只檢查一個嵌套級別。如果你愿意，你可以讓它遞回。

嘗試如下

const places = [ { id: 1, name: "p 1", icon: "icon-p", parent_id: null, }, { id: 2, name: "p 2", icon: "icon-p", parent_id: 1, }, { id: 3, name: "p 3", icon: "icon-p", parent_id: 1, }, { id: 4, name: "t 1", icon: "icon-t", parent_id: null, }, { id: 5, name: "t 2", icon: "icon-t", parent_id: 4, }, { id: 6, name: "t 3", icon: "icon-t", parent_id: 4, }, { id: 7, name: "a 1", icon: "icon-a", parent_id: null, }, { id: 8, name: "b 1", icon: "icon-b", parent_id: null, }, { id: 9, name: "h 1", icon: "icon-h", parent_id: null, }, { id: 11, name: "h 2", icon: "icon-h", parent_id: 9, }, { id: 12, name: "h 3", icon: "icon-h", parent_id: 9, }, { id: 13, name: "h 4", icon: "icon-h", parent_id: 9, }, ];

const output = places.reduce((prev, curr) => {
  if (curr.parent_id === null) {
    prev.push(curr);
  } else {
    const parent = prev.find(({ id }) => id === curr.parent_id);
    if (parent) {
      parent.children
        ? parent.children.push(curr)
        : (parent.children = [{ ...parent }, curr]);
    }
  }
  return prev;
}, []);

console.log(JSON.stringify(output, null, 2));

uj5u.com熱心網友回復：

您可以使用 as 輕松實作結果Map：

const places = [
  {
    id: 1,
    name: 'p 1',
    icon: 'icon-p',
    parent_id: null,
  },
  {
    id: 2,
    name: 'p 2',
    icon: 'icon-p',
    parent_id: 1,
  },
  {
    id: 3,
    name: 'p 3',
    icon: 'icon-p',
    parent_id: 1,
  },
  {
    id: 4,
    name: 't 1',
    icon: 'icon-t',
    parent_id: null,
  },
  {
    id: 5,
    name: 't 2',
    icon: 'icon-t',
    parent_id: 4,
  },
  {
    id: 6,
    name: 't 3',
    icon: 'icon-t',
    parent_id: 4,
  },
  {
    id: 7,
    name: 'a 1',
    icon: 'icon-a',
    parent_id: null,
  },
  {
    id: 8,
    name: 'b 1',
    icon: 'icon-b',
    parent_id: null,
  },
  {
    id: 9,
    name: 'h 1',
    icon: 'icon-h',
    parent_id: null,
  },
  {
    id: 11,
    name: 'h 2',
    icon: 'icon-h',
    parent_id: 9,
  },
  {
    id: 12,
    name: 'h 3',
    icon: 'icon-h',
    parent_id: 9,
  },
  {
    id: 13,
    name: 'h 4',
    icon: 'icon-h',
    parent_id: 9,
  },
];

const mapObj = places.reduce((acc, curr) => {
  const { id, name, icon, parent_id } = curr;
  if (!acc.get(parent_id)) {
    acc.set(id, {
      id,
      icon,
      children: [curr],
    });
  } else acc.get(parent_id)?.children?.push(curr);
  return acc;
}, new Map());

const result = [...mapObj.values()];
console.log(result);

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468382.html

標籤：javascript 排序目的减少

上一篇：如何使用邏輯應用標準將物體插入Azure表存盤？

下一篇：Vue.js：更改作為道具傳遞的物件是一種不好的技術嗎？