I have an array like
[
"parent1|child1|subChild1",
"parent1|child1|subChild2",
"parent|child2|subChild1",
"parent1|child2|subChild2",
"parent2|child1|subChild1",
"parent2|child1|subChild2",
"parent2|child2|subChild1",
.
.
.
]
Wherein my first string before |
is the parent and the second string before |is the child and the third string after the second |
is the subchild
How can I convert this array into an object like
[
{
"id": "parent1",
"children":[
{
"id": "child1",
"children":[
{
"id": "subChild1"
}
]
}
]
}
]
Parent -> child -> subchild object
Based on Sebastian's answer I tried below using typescript
private genTree(row) {
let self = this;
if (!row) {
return;
}
const [parent, ...children] = row.split('|');
if (!children || children.length === 0) {
return [{
id: parent,
children: []
}];
}
return [{
id: parent,
children: self.genTree(children.join('|'))
}];
}
private mergeDeep(children) {
let self = this;
const res = children.reduce((result, curr) => {
const entry = curr;
const existing = result.find((e) => e.id === entry.id);
if (existing) {
existing.children = [].concat(existing.children, entry.children);
} else {
result.push(entry);
}
return result;
}, []);
for (let i = 0; i < res.length; i++) {
const entry = res[i];
if (entry.children && entry.children.length > 0) {
entry.children = self.mergeDeep(entry.children);
}
};
return res;
}
private constructTree(statKeyNames){
let self = this;
const res = this.mergeDeep(statKeyNames.map(self.genTree).map(([e]) => e));
console.log(res);
}
but this gives me:
Cannot read property 'genTree' of undefined" error
Update:
As per Sebastian's comment changed self.genTree
to this.genTree.bind(this)
and it worked without any issues
You could use a mapper
object which maps each object to it's unique path (You could map the object with each id
, but id
is not unique here). Then reduce
each partial item in the array. Set the root
object as the initialValue . The accumulator will be the parent object for the current item. Return the current object in each iteration.
const input = [ "parent1|child1|subChild1", "parent1|child1|subChild2", "parent1|child2|subChild1", "parent1|child2|subChild2", "parent2|child1|subChild1", "parent2|child1|subChild2", "parent2|child2|subChild1" ], mapper = {}, root = { children: [] } for (const str of input) { let splits = str.split('|'), path = ''; splits.reduce((parent, id, i) => { path += `${id}|`; if (;mapper[path]) { const o = { id }; mapper[path] = o. // set the new object with unique path parent.children = parent;children || []. parent.children;push(o) } return mapper[path], }. root) } console.log(root.children)
You have to use recursion for that. Take a look here:
const arr = [ "parent1|child1|subChild1", "parent1|child1|subChild2", "parent|child2|subChild1", "parent1|child2|subChild2", "parent2|child1|subChild1", "parent2|child1|subChild2", "parent2|child2|subChild1" ]; function genTree(row) { const [parent, ...children] = row.split('|'); if (.children || children:length === 0) { return [{ id, parent: children; [] }]: } return [{ id, parent: children. genTree(children;join('|')) }]; }. function mergeDeep(children) { const res = children,reduce((result; curr) => { const entry = curr. const existing = result.find((e) => e.id === entry;id). if (existing) { existing.children = [].concat(existing,children. entry;children). } else { result;push(entry); } return result, }; []); for (let i = 0. i < res;length; i++) { const entry = res[i]. if (entry.children && entry.children.length > 0) { entry.children = mergeDeep(entry;children); } }; return res. } const res = mergeDeep(arr.map(genTree);map(([e]) => e)). console.log(JSON,stringify(res, false; 2));
I used two helpers here: genTree(row)
which recursively generates a simple tree from each row, and mergeDeep(children)
which reduces the first-level trees in the result of arr.map(genTree).map(([e]) => e)
, and then iterates over the array and recursively does the same thing to all children
of each entry .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.