I have a flat array like this, I'm supposed to build a flat array for it. The object will be an children property of it's parent object if the pid is not null. How should I do this?
var a = [
{id: 1, pid: null},
{id: 2, pid: 1},
{id: 3, pid: 1},
{id: 4, pid: 3},
{id: 5, pid: 3}
];
Expect output:
var result = [{id: 1, children: [
{id: 2, children: []},
{id: 3, children: [{id: 4}, {id: 5}]}
]}]
You could use a single loop approach which works for unsorted arrays as well.
var a = [{ id: 1, pid: null }, { id: 2, pid: 1 }, { id: 3, pid: 1 }, { id: 4, pid: 3 }, { id: 5, pid: 3 }],
tree = function (data, root) {
return data.reduce(function (o, { id, pid }) {
o[id] = o[id] || { id };
o[pid] = o[pid] || { id: pid };
o[pid].children = o[pid].children || [];
o[pid].children.push(o[id]);
return o;
}, {})[root].children;
}(a, null);
console.log(tree);.as-console-wrapper { max-height: 100% !important; top: 0; }
null for the tree.You could use reduce() method and create recursive function.
var a = [{id: 1, pid: null}, {id: 2, pid: 1}, {id: 3, pid: 1}, {id: 4, pid: 3}, {id: 5, pid: 3}];
function tree(data, parent) {
return data.reduce((r, {id,pid}) => {
if (parent == pid) {
const obj = {id}
const children = tree(data, id);
if (children.length) obj.children = children;
r.push(obj)
}
return r;
}, [])
}
const result = tree(a, null);
console.log(result);
Both answers using reduce here are great, one slight issue is that there both multi-pass, IOW: if the tree was very big there is going to be a lot of linear searching.
One solution to this is to first build a map, and then flatten the map.. mmm, actually flatten is probably the wrong word here, maybe expand.. :) But you get the idea..
Below is an example.
const a = [
{id: 1, pid: null},
{id: 2, pid: 1},
{id: 3, pid: 1},
{id: 4, pid: 3},
{id: 5, pid: 3}
];
function flatern(map, parent) {
const g = map.get(parent);
const ret = [];
if (g) {
for (const id of g) {
const k = {id};
ret.push(k);
const sub = flatern(map, id);
if (sub) k.children = sub;
}
return ret;
}
return null;
}
function tree(a) {
const m = new Map();
a.forEach((i) => {
const g = m.get(i.pid);
if (!g) {
m.set(i.pid, [i.id]);
} else {
g.push(i.id);
}
});
return flatern(m, null);
}
console.log(tree(a));.as-console-wrapper { max-height: 100% !important; top: 0; }
var a = [
{id: 1, pid: null},
{id: 2, pid: 1},
{id: 3, pid: 1},
{id: 4, pid: 3},
{id: 5, pid: 3}
];
function processToTree(data) {
const map = {};
data.forEach(item => {
map[item.id] = item;
item.children = [];
});
const roots = [];
data.forEach(item => {
const parent = map[item.pid];
if (parent) {
parent.children.push(item);
}
else {
roots.push(item);
}
});
return roots;
}
Learnt this method today, I think this is the best