I got an assignment to display comments in a recursive way, something like so:
The data I got from the server was flat, meaning:
every item in the array holds a reference to its parent, like so:
const entries = [
{
index: 1,
parent: 0
},
{
index: 2,
parent: 1
},
{
index: 3,
parent: 2
},
...
...
];
After thinking how to "attack" this problem, I realized
If I want a recursive object, then the easiest solution is a recursive one
Here is the function that converts a flat array to a tree array:
const arrayToTree = (arr, parent = 0) =>
arr.filter(item => item.parent === parent)
.map(child => ({ ...child, children: arrayToTree(arr,
child.index) }));
A quick rundown:
- We first filter the
root parent
's children. - Then we do the same to each of the children we just grabbed
My answer to the question on Stack overflow
Here is a codepen if you want to play more with the data ot the solution:
Sources that helped me:
Top comments (4)
I have written something like this and published it as an npm package
github.com/rxliuli/liuli-tools/blo...
Cool 😎
If you are using directories for your structure you could use my solution. It creates a structured object from an array using path and file keys. davidclews.com/article/13.html
Nice 👌🏽