Transform array of objects to nested array

Question

I have the array of objects

[ 
 { id: 1, parent_id: null, title: 'Title 1' },
 { id: 2, parent_id: 1, title: 'Title2' },
 { id: 3, parent_id: 2, title: 'Title 3' },
 { id: 4, parent_id: null, title: 'Title 4' } 
]

I need to transform this array to this

[ 
 { 
 id: 1,
 parent_id: null,
 children: [ 
 { 
 id: 2,
 parent_id: 1,
 title: 'Title2',
 children: [ 
 { id: 3, parent_id: 2, title: "Title 3" } 
 ] 
 }
 ]
 }, 
 {id: 4, parent_id: null, title: 'Title 4' } 
] 

I have no idea, how can do this

• Anurag Srivastava: @Upvoter How does this question demonstrate research effort?
• Taplar: Please show any attempt that you have made to solve this issue yourself. You are expected to have made an attempt that we can then help you debug. meta.stackoverflow.com/questions/261592/… Also review How to Ask
• Nina Scholz: is the data sorted? what does not work?

Answer 1

I think this will work:

const original = [ 
 { id: 1, parent_id: null, title: 'Title 1' },
 { id: 2, parent_id: 1, title: 'Title2' },
 { id: 3, parent_id: 2, title: 'Title 3' },
 { id: 4, parent_id: null, title: 'Title 4' } 
]
const transform = arr => {
 for (let i = arr.length - 1; i >= 0; i--) {
 const post = arr[i]
 const parent = arr.find(p => p.id === post.parent_id)
 if (parent) {
 if (!parent.children) {
 parent.children = []
 }
 parent.children.push(post)
 post.duplicate = true
 }
 }
 for (let i = arr.length - 1; i >= 0; i--) {
 if (arr[i].duplicate) {
 arr.splice(i, 1)
 }
 }
 return arr
}
console.log(transform(original))

Here is the fiddle: https://jsfiddle.net/7h8mj63e/

Answer 2

You could take a standard approach for generating a tree from data with id and parent id.

var data = [{ id: 1, parent_id: null, title: 'Title 1' }, { id: 2, parent_id: 1, title: 'Title2' }, { id: 3, parent_id: 2, title: 'Title 3' }, { id: 4, parent_id: null, title: 'Title 4' }],
 tree = function (data, root) {
 var t = {};
 data.forEach(o => {
 Object.assign(t[o.id] = t[o.id] || {}, o);
 t[o.parent_id] = t[o.parent_id] || {};
 t[o.parent_id].children = t[o.parent_id].children || [];
 t[o.parent_id].children.push(t[o.id]);
 });
 return t[root].children;
 }(data, null);
console.log(tree);

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

Answer 3

Try with this recursion:

function update(item) {
 if (item.parent_id) {
 const parent = arr.findIndex(p => p.id === item.parent_id);
 if (!arr[parent].children)
 arr[parent].children = [];
 const index = arr[parent].children.findIndex(ch => ch.id === item.id);
 if (index >= 0)
 arr[parent].children.splice(index, 1);
 arr[parent].children.push(item);
 update(arr[parent]);
 }
}
arr.forEach(item => update(item));
arr = arr.filter(item => !item.parent_id);
console.log(arr);