how to change a data that can be used on tree component

Question

I want to build a tree and using ant design tree component.my data that I fetch from server is not good to use for this component I have lots of child and nested relations so I decided to make the data from my original data .some of children data has their own children and some of them has not. I don`t know what code I should use. I used foreach but I also get this error data.foreach is not a function. this is my code:

const treeData = [
        {
            title:chart?.title,
            key:chart?.id,
            children:chart?.childs?.map((i)=>({title:i.title, key:i.id, children:i.childs}))
        }
    ]

with this code I can only have access to lvl1 and some of the children has 4 levels so I should handle them and I don`t know how.

i tried lots of functions that I wrote with foreach and map but it was useless

Answer 1

Its seems you have nested data tree received from server data, and you want to format it to be used in Ant design tree component. In order to achieve this, you will need to flatten the server data recursively. Here's how you can do this.

// Create  a recursive function to flatten the data
const flattenData = (data) => {
    if (!data) return [];

    return data.map((item) => ({
    title: item.title,
    key: item.id,
    children: flattenData(item.childs), // Recursively flatten children
    }));
};

// Assuming you have your initial data structure in 'chart'
const treeData = flattenData([chart]); // Convert the data into a flattened structure

The above code has a recursive function that will loop over the nested tree, and gives you a formatted array. You can then finally go ahead and use this in the component like so.

import { Tree } from 'antd';

const TreeComponent = () => {
    return (
        <Tree
            treeData={treeData}
        />
    );
};

export default TreeComponent;

overview of how the data is structured with above code:

var chart = {
  id: 'root',
  title: 'Root Chart',
  childs: [
    {
      id: 'layer1',
      title: 'Layer 1 Chart',
      childs: [
        {
          id: 'layer2',
          title: 'Layer 2 Chart',
          childs: [
            {
              id: 'layer3',
              title: 'Layer 3 Chart',
              childs: [
                {
                  id: 'layer4',
                  title: 'Layer 4 Chart',
                  childs: null, // or an empty array if there are no more children
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

var flattenData = (data) => {
    if (!data) return [];

    return data.map((item) => ({
    title: item.title,
    key: item.id,
    children: flattenData(item.childs), // Recursively flatten children
    }));
};

var treeData = flattenData([chart]);
console.log(treeData);

Hope that helps :)