Group nested arrays in an object in js (Tree Vue.js)

Question

This is my array of objects: I am using vue.js , I need a tree like this to keep the structure of tree view: https://v2.vuejs.org/v2/examples/tree-view.html

[
   {
      "name": "",
      "children": []
   },
   {
      "name": "",
      "children": [
         {
            "name": "Leggi",
            "children": []
         }
      ]
   },
   {
      "name": "",
      "children": [
         {
            "name": "Leggi",
            "children": [
               {
                  "name": "2010",
                  "children": []
               }
            ]
         }
      ]
   },
   {
      "name": "",
      "children": [
         {
            "name": "Leggi",
            "children": [
               {
                  "name": "2011",
                  "children": []
               }
            ]
         }
      ]
   },
   {
      "name": "",
      "children": [
         {
            "name": "Titoli",
            "children": []
         }
      ]
   }
]

I need a function to retrive an object grouped by name with his childrens

{
   "name": "",
   "children": [
      {
         "name": "Leggi",
         "children": [
            {
               "name": "2010",
               "children": []
            },
            {
               "name": "2011",
               "children": []
            }
         ],
         "name": "Titoli",
         "children": []
      }
   ]
}

I would like to know if there it is a simple way (instead of writing a recursive function), like using lodash or something near it. Thanks

Tizio Fittizio · Accepted Answer · 2019-03-02 22:17:12Z

2

I think that i have implemented a more readable answer:

const rootTree = [];
const putInTree = (tree, node) => {
    let nodeInTree = tree.find(x => x.name === node.name);
    if (!nodeInTree) {
        nodeInTree = {name: node.name, children: []};
        tree.push(nodeInTree);
    }
    if (node.children[0]) putInTree(nodeInTree.children, node.children[0])
}
nodes.forEach(node => putInTree(rootTree, node));

nodes here is your start array, let me know if this is ok

answered Mar 2, 2019 at 22:17

Tizio Fittizio

5295 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tizio Fittizio Over a year ago

Btw, this is recursive but it does the job

Alessio R · Accepted Answer · 2019-03-02 15:41:27Z

0

 treeArchive.forEach(element => {
      element.children.forEach(father => {
        if (result.children.length != 0) {
          cicleChildrens(result, father); 
            function cicleChildrens(padrePrecedente, nuovoPadre){
            var brother = padrePrecedente.children.find(x => x.name == nuovoPadre.name);
            if (brother != undefined) cicleChildrens(brother, nuovoPadre.children[0]);
            else padrePrecedente.children.push(nuovoPadre);
            };
        }
        else result.children.push(father);
      });
  });

This is currently my working code.. I'm struggling tryng to understand your code @chriss

answered Mar 2, 2019 at 15:41

Alessio R

355 bronze badges

Comments

chriss · Accepted Answer · 2019-03-02 15:51:04Z

0

Try this one:

function getGroupedByName(given) {
    let result = given.reduce((a, b) => { 
        if(!a[b.name]) a[b.name] = [];
        a[b.name] = [...a[b.name], ...b.children];
        return a;
    }, {});
    result = Object.keys(result).map(key => ({name: key, children: getByName(result[key])}));
    return result;
}

const o = []; // your initial object
getGroupedByName(o, "Leggi")

It is returning it as an array of objects having name and children props, as i am assuming first level can also have multiple different names, not all being ""

It goes first trough all elements in array and groups them into object with structure { name: children } where children is array of all children for same group. For each children array it preforms same operation, going trough array and flattening it into { name: children } object.

At this moment we have following structure:

{ "": { 
 Leggi: {...}
}}

When everything is grouped, Object.keys loops trough all keys and breaks it into array where key is name and value children property

edited Mar 2, 2019 at 15:51

answered Mar 2, 2019 at 1:51

chriss

6694 silver badges9 bronze badges

3 Comments

Alessio R Over a year ago

It works perfect!! Can you explain a bit your code? Thanks

Alessio R Over a year ago

By the way I'm struggling to understand ES6 features yet.. This is my current working code: (bad?)

chriss Over a year ago

Added comment to bottom of answer, hopefully if clear it up a bit

Collectives™ on Stack Overflow

Group nested arrays in an object in js (Tree Vue.js)

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related