You might also get a question like this transform flat list, a nested list.
And this is some super real stuff typically from the back and you're getting old data as a flat list.
And typically, this data can have children from one another, rejection it means for us in the front
end, it is not comfortable to render this data.
We can simply go with for loop because we have children.
We need, first of all, to render on the root levels.
And then for every single element, find its children and render them.
This is where typically you want to transform your data from flat lists a nested list on LUGUENTZ.
And this is exactly what we must do in this video.
As you can see here, we have our flipped list and every single element is an object.
We have unique ID, some name and parent and first.
First of all, ID is important because this is our unique identifier.
And secondly, parent data, and it can be either ID or another item, for example, he apparently did
one.
This is this item.
So this object is the parent of this item.
And secondly, parent data can be null if this is a root element and it doesn't have a parent.
So as you can see here, we have two root elements with a D1 and two.
Now we have a D3, which is the child of parent one.
So this is the second level.
This is why the name his level two item three.
So you understand the level in now we have a default, which is apparently three, which actually means
this is a child of this element.
And actually, this parent a the three is this this is why it's level three item four.
And here we have a D5, which is actually a child of Parent 8.2mm, which means this item.
And actually, this is how very typical of getting data from the backend.
Now we must transform it in such format.
So we have a flatter a with just fruit elements.
So as you can see here, we have two objects or object, which they do one and object with e.g. two
because they are both root elements and their parent is now now inside.
We have a new property, children, and this is exactly children which are mapped inside.
And here, as you can see, we have a D three and also children inside because actually a D4 is nested
inside the three and exactly the same we have here.
We have inside the two children and here are five and children.
And I admit it here names, because they are not important for understanding.
But obviously you can have all additional properties here.
And as you can see in the last level, when you don't have any children, then why get in here, children
empty array.
So our task now is to transform flat list to nested list.
And does the author of the said previously, for some people, it is much easier to just try to point
how they will solve it and then just code it.
This is why let's try to do it now.
So first of all, I will write here to do what we are doing.
The first point is to get all the elements because this is what we want to render.
Let's write it just like this get root elements.
Silver must have an array of powerful elements.
The second point is to check all children and understand if overlooked elements have children.
If no, then we simply return empty.
If yes, then we need recursively to find children, and we must do it recursively because we need to
check every single element and check if it has children.
So we can write here something like this check children if they have children.
And now the next point will be, if not, then we just return it with empty children.
And number four here is if yes, then we want to go to number two, which actually means we're making
number two recursively until we're at the end of our elements.
Now let's try to write the code.
So first of all, I want to assign it to our nested list.
And what I want to do, I want to take our fleet list and find on little elements.
And for this, we can just use filter because we want to find all elements where our parent ID is now.
In this case, we can simply say that we have item and item dot parent ID equals null.
So we're good to go.
Let's check the sour time to load in the page.
And now we have our nested list.
As you can see, we have our array of objects.
And here we have a D1 and D2 because their parents are now.
This is exactly what we wanted after this.
I want just to write that map and inside the function as children.
Why I'm doing like this, because actually, this function will be called recursively and it should
be completely stateless function, which actually means we must call this function on any item and it
must work.
This is why I want to create here our add children function and we get in here and item but don't need
anything else because here we have our little list on the top.
If you don't have it available on the top, then maybe you can get here a second document to flirt list
in your code, but it will be in your real project.
Here we have access to our fleet list.
So what we're doing here, we're looping through our route elements and we're mapping at children,
which actually means if we want to add children to every single route element.
So first of all, we must find our children.
So let's right here, children, and we know that our children is just flips list, which is filtered
by parent data where ID equals item dot ID.
So let's do this now.
We simply take littlest dot filter, and here we have our child, and let's name it, for example,
child item.
And we want to check child item dot parent ID equals in our case item dot I.D. In this case, we are
finding all our children.
Let's console.log what we have here.
So I'm just writing children Andrew Lloyd in the page.
And as you can see here, we've got one single element because this is a child of ours or tellement
with a div.
And here we have also one more child of root element with parent 8.2mm, which actually means it is
working correctly.
The next point is to check if we have any children.
So here we can write.
If our children land bigger than zero, then we must do our recursive magic because we need not only
get children of children, but we must do it recursively.
What I want to do before I want to create a property led was our to children, and they want to sign
here empty because actually, if we're not inside the safe, then we don't need to change anything.
We simply need to return to children.
And as you can see, I assigned by default empty array here so we can return here, object to sign.
And here I am, right?
An empty object, then comma item comma.
And here is our children next to children.
Why I wrote like this because actually, if you will use here, push or just with what you are saying
that here are in this two children, then you will mutate the item, which actually means you will change
this item inside flirt list because we have an object reference.
We don't want this.
We simply want to retain your data.
This is why I'm using here object to sign with them to object.
After this, we're using our item silver copy all property as a file item inside this new object and
where sign in here and your property children, which is on their two children.
And in this case, we simply have just let nested children empty object.
Let's check the time to load in the page.
Here is our nested list.
And as you can see, we have no children empty array because actually we didn't write any logic for
this eve.
If this is why we simply return data in such form, it ID name, parent ID, actually all fields and
additionally.
Children and as you can see, we have here on live with elements, which actually means everything is
working correctly and we must just call recursively hear our code.
So what we want to do here, we want to look through every single child and call at children function
on this child so we can assign higher awareness to children.
And this is just our children that map.
And we have access to every single child.
And we are calling at children with our child.
So what is happening in this case?
For example, we found the child we're checking here, OK?
We have a child and say children.
And here we are mapping through our array.
And for every single element where Colin at children, most important part that were Colin disfunction
recursively.
First of all, we called it here inside root element.
Now here, inside that children were Colin.
It was map and one were calling it here.
We're chicken children of this child, which actually means it will go recursively until we don't have
any children and we're just not going to this condition.
So, for example, in our case, here were Colin at three times.
First of all, for you do one, then for the three and then for a default.
And this is exactly why we need recursion here.
Let's check the Southampton load in the page.
Let's check our nested list.
And as you can see, we have no children and inside item one, we have just one child with three.
And we also have a children's property inside and we have one more child here.
Level three, item four.
And we have children empty array because actually our recursion ended and we simply got here empty children
and we assign them here.
So once again, first of all, we must get on our element.
Secondly, we must create a function which we can call recursively on any element.
And this is our children now.
Inside the children were, first of all, trying to find all children of the item and secondly were
checking if we need to make recursion for our children if we have any.
If yes, then we are Colin at children recursively.
If no, we simply make an object to sign and return and here our children.
So this is how you typically do it in the real project.