w3resource

JavaScript: Nest a given flat array of objects linked to one another recursively

JavaScript fundamental (ES6 Syntax): Exercise-90 with Solution

Nest Flat Array Recursively

Write a JavaScript program to nest a given flat array of objects linked to one another recursively.

Note: Useful for nesting comments, such as the ones on reddit.com.

  • Use recursion.
  • Use Array.prototype.filter() to filter the items where the id matches the link.
  • Use Array.prototype.map() to map each item to a new object that has a children property which recursively nests the items based on which ones are children of the current item.
  • Omit the second argument, id, to default to null which indicates the object is not linked to another one (i.e. it is a top level object).
  • Omit the third argument, link, to use 'parent_id' as the default property which links the object to another one by its id.

Sample Solution:

JavaScript Code:

//#Source https://bit.ly/2neWfJ2
// Define the 'nest' function to create a nested structure from flat data based on parent-child relationships.
const nest = (items, id = null, link = 'parent_id') =>
  items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: nest(items, item.id) }));

// Example usage:
// Given a flat array of comments with parent-child relationships, create a nested structure.
const comments = [
  { id: 1, parent_id: null },
  { id: 2, parent_id: 1 },
  { id: 3, parent_id: 1 },
  { id: 4, parent_id: 2 },
  { id: 5, parent_id: 4 }
];
const nestedComments = nest(comments); 
console.log(nestedComments);

Output:

[{"id":1,"parent_id":null,"children":[{"id":2,"parent_id":1,"children":[{"id":4,"parent_id":2,"children":[{"id":5,"parent_id":4,"children":[]}]}]},{"id":3,"parent_id":1,"children":[]}]}]

Flowchart:

flowchart: Nest a given flat array of objects linked to one another recursively

Live Demo:

See the Pen javascript-fundamental-exercise-90 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program to negates a predicate function.
Next: Write a JavaScript program that will return true if the provided predicate function returns false for all elements in a collection, false otherwise.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-90.php