将平面对象数组转换为嵌套对象数组[重复]

Question

我正在尝试将来自我的数据库的平面对象数组转换为需要嵌套结构才能管理可扩展子行的 react-table。

我制作了一个非常不言自明的 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"
    }
  ]

我想把它转换成这个结构：

  [
    {
      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"
            }
          ]
        }
      ]
    }
  ]

我尝试了一些递归方法，但他们留下了一些选择，所以我很乐意接受一些帮助。

谢谢。

Answer 1

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

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);

Answer 2

我认为 React 可以使用 rxjs 对吗？？？ 我认为 groupBy 会在这方面做得很好。 https://www.learnrxjs.io/learn-rxjs/operators/transformation/groupby