javascript arrays recursion tree primereact

Convert array to tree array in javascript

I have a tree array of objects and I want to convert it to use it into my primeReact component

This is my input 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",
  },
];

I want to get a Tree array like this, instead of having only id's array in children field I want to have the whole object of the children, for the above example, each field of the array should have only 3 fields (id, data, children) and data will have name, type, label, function.

The output should look like :

 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: "Functional 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: [],
            },
          ],
        },
      ],
    },
  ];

I've tried to convert my array but I don't have any idea how to convert it into a tree array.

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)

Solution

You could build a new tree by looking to children and remove the children for getting the parent objects.

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