将平面对象数组转换为嵌套对象数组

Reb*_*tGG 3 javascript ecmascript-6 reactjs

我正在尝试转换来自数据库的对象的平面数组,以提供给需要嵌套结构才能管理可扩展子行的反应表。

我制作了一个 CodeSandbox ,它非常不言自明:

https://codesandbox.io/s/tender-chatterjee-kdssi?file=/src/App.js

基本上,我的原始数据的结构如下:

  [
    {
      code: "A0",
      parent: ""
    },
    {
      code: "A01",
      parent: "A0"
    },
    {
      code: "A011",
      parent: "A01"
    },
    {
      code: "B0",
      parent: ""
    },
    {
      code: "B01",
      parent: "B0"
    },
    {
      code: "B011",
      parent: "B01"
    }
  ]
Run Code Online (Sandbox Code Playgroud)

我想将其转换为以下结构:

  [
    {
      code: "A0",
      parent: "",
      subRows: [
        {
          code: "A01",
          parent: "A0",
          subRows: [
            {
              code: "A011",
              parent: "A01"
            }
          ]
        }
      ]
    },
    {
      code: "B0",
      parent: "",
      subRows: [
        {
          code: "B01",
          parent: "B0",
          subRows: [
            {
              code: "B011",
              parent: "B01"
            }
          ]
        }
      ]
    }
  ]
Run Code Online (Sandbox Code Playgroud)

我已经尝试了一些递归方法来做到这一点,但他们留下了一些选项,所以我很乐意接受一些帮助。

谢谢。

Jam*_*iec 5

这可以通过相当简单的递归方法来完成。

const mockData = [{
    code: "A0",
    parent: ""
  },
  {
    code: "A01",
    parent: "A0"
  },
  {
    code: "A011",
    parent: "A01"
  },
  {
    code: "B0",
    parent: ""
  },
  {
    code: "B01",
    parent: "B0"
  },
  {
    code: "B011",
    parent: "B01"
  }
];


const hierarchize = (parent, list) => {
  const children = list.filter(x => x.parent == parent.code);
  children.forEach(child => hierarchize(child, list));
  parent.subRows = children;
}

const topLevel = mockData.filter(x => x.parent == "");
topLevel.forEach(top => hierarchize(top, mockData));

console.log(topLevel);
Run Code Online (Sandbox Code Playgroud)