Convert array to nested array object based on its depth value?

Question

I have the following JavaScript object:

this is basically a list of comments, the actual list is much longer and more deeply nested, so this is a simplified version.

[
    {
        id: 200,
        comment: "If you have any question, please comment here.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
    {
        id: 201,
        comment: "Hi, I'm stuck at the installation of node.js. Can I ask help?",
        depth: 2,
        parent_id: 200, 
        comments: [],
    },
    {
        id: 202,
        comment: "This is a detailed explanation, great.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
    {
        id: 203,
        comment: "Hello! That's weird. Do you have a screenshot?",
        depth: 3,
        parent_id: 201, 
        comments: [],
    },
]

I want to convert the above to the following. But I think I use .map or similar, but I don't have a clear idea of how to implement this.

[
    {
        id: 200,
        comment: "If you have any question, please comment here.",
        depth: 1,
        parent_id: null, 
        comments: [
            {
                id: 201,
                comment: "Hi, I'm stuck at the installation of node.js. Can I ask help?",
                depth: 2,
                parent_id: 200, 
                comments: [                    
                    {
                        id: 203,
                        comment: "Hello! That's weird. Do you have a screenshot?",
                        depth: 3,
                        parent_id: 201, 
                        comments: [],
                    },
                ],
            },
        ],
    },
    {
        id: 202,
        comment: "This is a detailed explanation, great.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
]

Thanks.

jeremy-denis · Accepted Answer · 2022-04-12 06:55:53Z

a solution with array.reduce

var data = [
    {
        id: 200,
        comment: "If you have any question, please comment here.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
    {
        id: 201,
        comment: "Hi, I'm stuck at the installation of node.js. Can I ask help?",
        depth: 2,
        parent_id: 200, 
        comments: [],
    },
    {
        id: 202,
        comment: "This is a detailed explanation, great.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
    {
        id: 203,
        comment: "Hello! That's weird. Do you have a screenshot?",
        depth: 3,
        parent_id: 201, 
        comments: [],
    },
];


const result = data.reduce((acc, curr) => {
  let parent = (curr.parent_id) ? data.filter(el => el.id === curr.parent_id) : [];
  if (parent.length) {
    parent[0].comments.push(curr);
  } else {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(result);

Gass · Accepted Answer · 2022-04-12 07:03:43Z

1

One approach to seem to work is by using a double loop with forEach() and a conditional statement to push the elements inside the comments array if conditions are met.

let data = [
    {
        id: 200,
        comment: "If you have any question, please comment here.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
    {
        id: 201,
        comment: "Hi, I'm stuck at the installation of node.js. Can I ask help?",
        depth: 2,
        parent_id: 200, 
        comments: [],
    },
    {
        id: 202,
        comment: "This is a detailed explanation, great.",
        depth: 1,
        parent_id: null, 
        comments: [],
    },
    {
        id: 203,
        comment: "Hello! That's weird. Do you have a screenshot?",
        depth: 3,
        parent_id: 201, 
        comments: [],
    },
]

data.forEach((el_one) => {
  data.forEach((el_two) => {
    if(el_one.parent_id === el_two.id){
     el_two.comments.push(el_one)  
    }
  })
})

console.log(data)

edited Apr 12, 2022 at 7:03

answered Apr 12, 2022 at 6:49

Gass

9,6385 gold badges47 silver badges53 bronze badges

1 Comment

Xupitan Over a year ago

i think you should sort() data by depth first :

Jared · Accepted Answer · 2022-04-12 06:42:29Z

0

Create a plain object with elements, walk through your array and place all children elements into the comments field accessing corresponding parent element via that plain object. Then filter out all non-root elements (i assume your data is stored in the array named data):

// Fill in id-accessed storage
var elements_by_id = {};
data.forEach((el) => elements_by_id[el.id] = el );

// Feed comments
data.forEach((el) => el.parent_id ? ( elements_by_id[el.parent_id].comments.push(el) ) : '' );

// Remove non-root elements
data = data.filter( (el) => !el.parent_id );

answered Apr 12, 2022 at 6:42

Jared

1,4142 gold badges10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Convert array to nested array object based on its depth value?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related