What is the best way to render Tree using custom Tree Object JSON

[anil1712]

Hi,
I am having the Tree Data in this format. (eg. {name: ..., users: [ ... ]})

[ { 'id': '1', 'name': 'Value1', 'users': [ { 'name': 'Value2',  }, { 'name': 'Value3', 'users': [ { 'name': 'Value4',  } ] }, { 'name': 'Value4', 'users': [ { 'name': 'Value5',  } ] }, { 'name': 'Value5',  }, { 'name': 'Value6', 'users': [ { 'name': 'Value7',  } ] } ] } ]

What is the best way to convert it into required TreeData format?
(like: {title: ..., children:[ ... ]}))

Can we use nodeRenderer to achieve this?

Thanks
Anil

[fritz-c]

As all of the helper functions also use children as the key for children, I would suggest you convert it temporarily. Try this function:

const convertChildrenKeys = (children, prevKey, nextKey) => {
    return children.map(child => {
        const modifiedChild = {
            name: child.name,
            // carry over whatever other props you want
        };

        // If this child has children, add them using the nextKey
        if (child[prevKey] && child[prevKey].length > 0) {
            modifiedChild[nextKey] = convertChildrenKeys(child[prevKey], prevKey, nextKey);
        }

        return modifiedChild;
    });
};

// Convert your data to a form that can be handled by react-sortable-tree
const compatible = convertChildrenKeys(myTreeData, 'users', 'children');

// ... 

// After you're done using the library,
// convert the data back to its original format (if you need to)
const original = convertChildrenKeys(compatible, 'children', 'users');

By the way, nodeRenderer is entirely for visual customization. For example, if you wanted to render rows without borders, add buttons anywhere, etc.

[anil1712]

Thanks @fritz-c
convertChildrenKeys is what I was expecting.

But I am facing one more difficulty. How can we sort the children array (title) in ascending order?