在javascript中将数组转换为树数组

Question

我有一个对象的 Tree 数组，我想将其转换以将其使用到我的 primeReact 组件中

这是我的输入数据：

[
  {
    name: "My name",
    Myid: "1",
    children: [],
    type: "type1",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: "Name2",
    Myid: "2",
    children: [],
    type: "Type2",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: " Another Name",
    Myid: "3",
    children: ["1", "2"],
    type: "this is my type",
    label: "My label 4",
    function: "Functionnal Component",
  },
  {
    name: "Name3",
    Myid: "5",
    children: [],
    type: "Type3",
    label: "Mylabel3",
    function: "myfunction3",
  },
  {
    name: "Name6",
    Myid: "6",
    children: ["3"],
    type: "Type6",
    label: "Mylabel6",
    function: "myfunction6",
  },
];

我想要得到一个像这样的 Tree 数组，而不是在 Children 字段中只有 id 的数组，我想拥有孩子的整个对象，对于上面的例子，数组的每个字段应该只有 3 个字段：(id,数据，子项）和数据将有名称，类型，标签，功能。

输出应如下所示：

 const output = [
    {
      key: "5",
      data: {
        name: "Name3",
        type: "Type3",
        label: "Mylabel3",
        function: "myfunction3",
      },
      children: [],
    },
    {
      key: "6",
      data: {
        name: "Name6",
        type: "Type6",
        label: "Mylabel6",
        function: "myfunction6",
      },
      children: [
        {
          key: "3",
          data: {
            name: " Another Name",
            type: "this is my type",
            label: "My label 4",
            function: "Functionnal Component",
          },
          children: [
            {
              key: "1",
              data: {
                name: "My name",

                type: "type1",
                label: "Mylabel",
                function: "myfunction",
              },
              children: [],
            },
            {
              key: "2",
              data: {
                name: "Name2",
                type: "Type2",
                label: "Mylabel",
                function: "myfunction",
              },
              children: [],
            },
          ],
        },
      ],
    },
  ];

我尝试转换数组，但我不知道如何将其转换为树数组

const manip = data?.map((el) => {
  return {
    key: el.Myid,
    data: {
      layer: el.layer,
      label: el.label,
      name: el.name,
      type: el.type,
    },
    children: el.children,
  };
});

console.log(manip)

Answer 1

您可以通过查找子对象来构建一棵新树，并删除子对象以获取父对象。

const
    data = [{ name: "My name", Myid: "1", children: [], type: "type1", label: "Mylabel", function: "myfunction" }, { name: "Name2", Myid: "2", children: [], type: "Type2", label: "Mylabel", function: "myfunction" }, { name: " Another Name", Myid: "3", children: ["1", "2"], type: "this is my type", label: "My label 4", function: "Functional Component" }, { name: "Name3", Myid: "5", children: [], type: "Type3", label: "Mylabel3", function: "myfunction3" }, { name: "Name6", Myid: "6", children: ["3"], type: "Type6", label: "Mylabel6", function: "myfunction6" }],
    getTree = data => {
        const
            t = {},
            c = new Set;

        data.forEach(({ Myid: id, children = [], ...data }) => {
            Object.assign(t[id] ??= {}, { id, data });
            t[id].children = children.map(id => {
                c.add(id);
                return t[id] ??= {};
            });
        });

        return Object.values(t).filter(o => !c.has(o.id));
    },
    tree = getTree(data);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您的预期输出：

const data = [
  {
    name: "My name",
    Myid: "1",
    children: [],
    type: "type1",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: "Name2",
    Myid: "2",
    children: [],
    type: "Type2",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: " Another Name",
    Myid: "3",
    children: ["1", "2"],
    type: "this is my type",
    label: "My label 4",
    function: "Functional Component",
  },
  {
    name: "Name3",
    Myid: "5",
    children: [],
    type: "Type3",
    label: "Mylabel3",
    function: "myfunction3",
  },
  {
    name: "Name6",
    Myid: "6",
    children: ["3"],
    type: "Type6",
    label: "Mylabel6",
    function: "myfunction6",
  },
];

const manip = data?.map((el) => {
  return {
    key: el.Myid,
    data: {
      function: el.function,
      label: el.label,
      name: el.name,
      type: el.type,
    },
    
    children: el.children ,
  };
});


FinalRes = manip.map(obj=>{
  return {
    ...obj,
    children:obj.children.map(id=>{
      let child = data.filter(x=>x.Myid===id)[0];
      return{
        key:child.Myid,
        data:{
          name:child.name,
          type:child.type,
          label:child.label,
          function:child.function
        }
      }
    })
  }
});
console.log(FinalRes)