How can I organize a collection of categories?

Question

I have a collection of categories with all their children which I get from the server via ajax. Now I want to order them in a way that every child category go under the related parent.

This is the all categories collection :

[
    {id: 28, name: "category1", parent_id: null},
    {id: 29, name: "category2", parent_id: null},
    {id: 30, name: "category3", parent_id: null},

    {id: 31, name: "category4", parent_id: 28},
    {id: 32, name: "category5", parent_id: 28},
    {id: 33, name: "category6", parent_id: 28},

    {id: 34, name: "category7", parent_id: 31},
    {id: 35, name: "category8", parent_id: 31},

    {id: 36, name: "category9", parent_id: 29},
]

parent_id : null means it's a parent category and any other number for the parent_id is pointing to the category parent.

anyway

I want to create a collection out of that data like this :

[
    {id: 28, name: "category1", parent_id: null, 
         children : [
             {id: 31, name: "category4", parent_id: 28, [
                 children : [
                      {id: 34, name: "category7", parent_id: 31},
                      {id: 35, name: "category8", parent_id: 31},
                 ]},

             {id: 32, name: "category5", parent_id: 28},
             {id: 33, name: "category6", parent_id: 28},

         ]},

    {id: 29, name: "category2", parent_id: null, 
         children: [
             {id: 36, name: "category9", parent_id: 29},
         ]},
    {id: 30, name: "category3", parent_id: null},

]

Cool. I want to have a rocket with a Tesla inside. What have you tried? — smnbbrv, Feb 11 '18 at 14:04
Too many times, the community answers this kind of answer. I don't understand why!... A lot of similar questions are closed because the OP doesn't show any effort. It's very funny, how the community answer this, sometimes close it. It depends whether people wake up with the intention to "help". All these kind of answers deserve to be closed!! — Ele, Feb 11 '18 at 14:11
@ele [so he said](https://stackoverflow.com/questions/48724071/if-statement-javascript-using-variable-from-other-file/48724192#48724192) — Jonas Wilms, Feb 11 '18 at 14:18

Jonas Wilms · Accepted Answer · 2018-02-11T14:26:52.480

At first build up a Map of parents to their children:

 const parentChilds = new Map;

 for(const el of data){
   const pid = el.parent_id;
   if(parentChilds.has(pid)){
     parentChilds.get(pid).push(el);
   } else {
     parentChilds.set(pid, [el]);
   }
 }

Now we only need to store the children arrays in the parents:

 for(const el of data)
  el.children = parentChilds.get(el.id) || [];

To get only the top level elements simply filter those without a parent:

 const result = data.filter(el => !el.parent_id);

You can actually do that all in one loop:

 const parentChilds = new Map;
 const result = [];

 for(const el of data){
   const {id, parent_id: pid} = el;

   if(parentChilds.has(id)) {
     el.children = parentChilds.get(id);
   } else {
     parentChilds.set(id, el.children = []);
   }

   if(pid){
     if(parentChilds.has(pid)){
       parentChilds.get(pid).push(el);
     } else {
       parenChilds.set(pid, [el]);
     }
   } else {
     result.push(el);       
   }
 }

But one question. the second piece of code, it only works when the parent categories are before the children ? — Hesan Aminiloo, Feb 11 '18 at 14:21

How can I organize a collection of categories?

1 Answers1