Build tree array from json in javascript

Question

I need to build this tree array from this json below, I still try using filter, map and reduce, but I can't achieve the result.

[{
  "code": "2",
  "name": "PENDING"
},{
  "code": "2.2",
  "name": "PENDING CHILDREN"
}, {
  "code": "2.2.01.01",
  "name": "PENDING CHILDREN CHILDREN"
}, {
  "code": "2.2.01.02",
  "name": "PENDING CHILDREN CHILDREN02"
}, {
  "code": "1",
  "name": "ACTIVE"
}, {
  "code": "1.1",
  "name": "ACTIVE CHILDREN"
}, {
  "code": "1.1.01",
  "name": "ACTIVE CHILDREN CHILDREN"
}]

but if need build this tree structuring by your code name

[{
  "code": "2",
  "name": "PENDING",
  "children": [{
    "code": "2.2",
    "name": "PENDING CHILDREN",
    "children": [{
      "code": "2.2.01.01",
      "name": "PENDING CHILDREN CHILDREN"
      }, {
      "code": "2.2.01.02",
      "name": "PENDING CHILDREN CHILDREN02"
    }]
  }]
},{
  "code": "1",
  "name": "ACTIVE",
  "children": [{
    "code": "1.1",
    "name": "ACTIVE CHILDREN",
    "children": [{
      "code": "1.1.01",
      "name": "ACTIVE CHILDREN CHILDREN"
    }]
  }]
}]

I try using reduce, but i dont understand build this logic with javascrtip. Follow my code below

var idToNodeMap = contas.reduce(function(map, node, i) {
  map[node.code] = node;
  node.children = [];


  return map;
});

you have some kind of hole in your data, from 2.2 to 2.2.01.01. — Nina Scholz
– Nina Scholz, Commented Nov 29, 2016 at 9:59

Tolgahan Albayrak · Accepted Answer · 2016-11-29 10:30:02Z

This may solve your issue

function ensureNode(code, name, root) {
  var last;
  var node = code.split(/\./g).reduce((prev, cur) => {
    last = (last && (last + '.' + cur)) || cur;
    if(!prev.children){
      prev.children = [];
    }
    var result = prev.children.find(item => item.code === last);
    if(!result) {
      prev.children.push(result = {code: last});
    }
    return result;
  }, root);
  node.name = name;
}


var data = [{
  "code": "2",
  "name": "PENDING"
},{
  "code": "2.2",
  "name": "PENDING CHILDREN"
}, {
  "code": "2.2.01.01",
  "name": "PENDING CHILDREN CHILDREN"
}, {
  "code": "2.2.01.02",
  "name": "PENDING CHILDREN CHILDREN02"
}, {
  "code": "1",
  "name": "ACTIVE"
}, {
  "code": "1.1",
  "name": "ACTIVE CHILDREN"
}, {
  "code": "1.1.01",
  "name": "ACTIVE CHILDREN CHILDREN"
}];

var result = {};

                           
data.forEach(item => ensureNode(item.code, item.name, result));
  
console.log(result);

Nina Scholz · Accepted Answer · 2016-11-29 10:35:36Z

With sorted data, you could use an object for building the tree and an array for the reference of the parents.

var data = [{ "code": "2", "name": "PENDING" }, { "code": "2.2", "name": "PENDING CHILDREN" }, { "code": "2.2.01.01", "name": "PENDING CHILDREN CHILDREN" }, { "code": "2.2.01.02", "name": "PENDING CHILDREN CHILDREN02" }, { "code": "1", "name": "ACTIVE" }, { "code": "1.1", "name": "ACTIVE CHILDREN" }, { "code": "1.1.01", "name": "ACTIVE CHILDREN CHILDREN" }],
    tree = function (data, root) {
        var o = {}, last = [root], level = 0;
        o[root] = {};
        data.forEach(function (a) {
            var parent = root;
            while (level && last[level].length >= a.code.length) {
                level--;
            }
            parent = last[level];
            level++;
            last.length = level;
            last.push(a.code);
            o[a.code] = a;
            o[parent].children = o[parent].children || [];
            o[parent].children.push(a);
        });
        return o[root].children;
    }(data, '');

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

Build tree array from json in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related