Organize an array of objects in JavaScript into a structure with nested children

Question

Organize an array of objects in JavaScript into a structure with nested children

I am facing a challenge with organizing an array of objects based on parentId and sort values. I need to create a nested array with 'children' and ensure proper sorting.

Consider the following data:

[{
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A'
}, {
    id: 2,
    sort: 1,
    parentId: 1,
    name: 'A.1'
}, {
    id: 3
    sort: 2,
    parentId: 1,
    name: 'A.2'
}, {
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B'
}]

The desired transformation should look like this:

[{
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B',
    children: []
}, {
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A',
    children: [{
        id: 2,
        sort: 1,
        parentId: 1,
        name: 'A.1'
    }, {
        id: 3
        sort: 2,
        parentId: 1,
        name: 'A.2'
    }]
}]

The sorting is based on the 'sort' value, with id 4 being at the top. The 'children' are nested and sorted accordingly.

I am seeking suggestions on an efficient approach to achieve this. I can use recursive loops to apply children, but I need assistance in maintaining the sorting order.

javascript arrays sorting

Answer 1

Answer №1

This proposal suggests a two-step process of sorting followed by filtering.

In the sorting step, the properties parentId and sort are used to order the array. This step is crucial for the subsequent filtering operation, which requires a pre-sorted array.

For filtering, the array is processed using the Array#filter() method, with thisArgs employed to reference nodes for potential child insertion.

Edit: An update is provided for handling unsorted data with id/parentId.

var array = [{ id: 1, sort: 2, parentId: null, name: 'A' }, { id: 2, sort: 1, parentId: 1, name: 'A.1' }, { id: 3, sort: 2, parentId: 1, name: 'A.2' }, { id: 4, sort: 1, parentId: null, name: 'B' }],
    nested;

array.sort(function (a, b) {
    return (a.parentId || -1) - (b.parentId || -1) || a.sort - b.sort;
});

nested = array.filter(function (a) {
    a.children = this[a.id] && this[a.id].children;
    this[a.id] = a;
    if (a.parentId === null) {
        return true;
    }
    this[a.parentId] = this[a.parentId] || {};
    this[a.parentId].children = this[a.parentId].children || [];
    this[a.parentId].children.push(a);
}, Object.create(null));

document.write('<pre>' + JSON.stringify(nested, 0, 4) + '</pre>');

Answer 2

This proposal suggests a two-step process of sorting followed by filtering.

In the sorting step, the properties parentId and sort are used to order the array. This step is crucial for the subsequent filtering operation, which requires a pre-sorted array.

For filtering, the array is processed using the Array#filter() method, with thisArgs employed to reference nodes for potential child insertion.

Edit: An update is provided for handling unsorted data with id/parentId.

var array = [{ id: 1, sort: 2, parentId: null, name: 'A' }, { id: 2, sort: 1, parentId: 1, name: 'A.1' }, { id: 3, sort: 2, parentId: 1, name: 'A.2' }, { id: 4, sort: 1, parentId: null, name: 'B' }],
    nested;

array.sort(function (a, b) {
    return (a.parentId || -1) - (b.parentId || -1) || a.sort - b.sort;
});

nested = array.filter(function (a) {
    a.children = this[a.id] && this[a.id].children;
    this[a.id] = a;
    if (a.parentId === null) {
        return true;
    }
    this[a.parentId] = this[a.parentId] || {};
    this[a.parentId].children = this[a.parentId].children || [];
    this[a.parentId].children.push(a);
}, Object.create(null));

document.write('<pre>' + JSON.stringify(nested, 0, 4) + '</pre>');

Answer 3

Answer №2

I decided to give it a shot and after some reflection, I've returned to find that there are already multiple responses. However, I'm still going to share my thoughts on the matter.

This approach involves making changes directly to the original Array:

var items = [{id: 1,sort: 2,parentId: null,name: 'A'}, {id: 2,sort: 1,parentId: 1,name: 'A.1'}, {id: 3,sort: 2,parentId: 1,name: 'A.2'}, {id: 4,sort: 1,parentId: null,name: 'B'}];


function generate_tree(arr){
  var references = {};
  arr.sort(function(a,b){
    // While sorting, keep references to each item by id
    references[a.id] = a; references[b.id] = b;
    // Introduce a children property
    a.children = []; b.children = [];
    if(a.sort > b.sort) return 1;
    if(a.sort < b.sort) return -1;
    return 0;
  });

  for(var i=0; i<arr.length; i++){
    var item = arr[i];
    if(item.parentId !== null && references.hasOwnProperty(item.parentId)){
      references[item.parentId].children.push(arr.splice(i,1)[0]);
      i--; // Adjusting index since it now holds the next item
    }
  }
  return arr;
}

document.body.innerHTML = "<pre>" + JSON.stringify(generate_tree(items), null, 4) + "</pre>";

Answer 4

I decided to give it a shot and after some reflection, I've returned to find that there are already multiple responses. However, I'm still going to share my thoughts on the matter.

This approach involves making changes directly to the original Array:

var items = [{id: 1,sort: 2,parentId: null,name: 'A'}, {id: 2,sort: 1,parentId: 1,name: 'A.1'}, {id: 3,sort: 2,parentId: 1,name: 'A.2'}, {id: 4,sort: 1,parentId: null,name: 'B'}];


function generate_tree(arr){
  var references = {};
  arr.sort(function(a,b){
    // While sorting, keep references to each item by id
    references[a.id] = a; references[b.id] = b;
    // Introduce a children property
    a.children = []; b.children = [];
    if(a.sort > b.sort) return 1;
    if(a.sort < b.sort) return -1;
    return 0;
  });

  for(var i=0; i<arr.length; i++){
    var item = arr[i];
    if(item.parentId !== null && references.hasOwnProperty(item.parentId)){
      references[item.parentId].children.push(arr.splice(i,1)[0]);
      i--; // Adjusting index since it now holds the next item
    }
  }
  return arr;
}

document.body.innerHTML = "<pre>" + JSON.stringify(generate_tree(items), null, 4) + "</pre>";

Answer 5

Answer №3

To redesign the data structure, consider the following format:

{ 1: { id: 1, sort: 2, parentId: null, name: 'A' }, 2: { id: 4, sort: 1, parentId: null, name: 'B' } }

Key points to note: the updated structure is in object form, not an array, and only includes the top-level elements (those with a parentId of null)

Next, iterate over the original array using a for loop and assign

new_obj[ orig_arr_curr_elem[parentId] ].children.push(orig_arr_curr_elem)

Create a new array with elements from new_obj and sort() the array (or the children property) based on your preference

Below is the code implementing steps 1 and 2 (execute this in node):

var util = require('util');
var old_arr = [{
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A'
}, {
    id: 2,
    sort: 1,
    parentId: 1,
    name: 'A.1'
}, {
    id: 3,
    sort: 2,
    parentId: 1,
    name: 'A.2'
}, {
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B'
}];

var new_obj = {};
for (var i = 0; i < old_arr.length; i++){
    if ( old_arr[i].parentId == null )
        new_obj[ old_arr[i].id ] = old_arr[i];
}

for (var i = 0; i < old_arr.length; i++){
    if ( old_arr[i].parentId == null ) continue;
    new_obj[ old_arr[i].parentId ].children = new_obj[ old_arr[i].parentId ].children || [];
    new_obj[ old_arr[i].parentId ].children.push( old_arr[i] );
}

console.log(util.inspect(new_obj, {showHidden: false, depth: null}));

Answer 6

To redesign the data structure, consider the following format:

{ 1: { id: 1, sort: 2, parentId: null, name: 'A' }, 2: { id: 4, sort: 1, parentId: null, name: 'B' } }

Key points to note: the updated structure is in object form, not an array, and only includes the top-level elements (those with a parentId of null)

Next, iterate over the original array using a for loop and assign

new_obj[ orig_arr_curr_elem[parentId] ].children.push(orig_arr_curr_elem)

Create a new array with elements from new_obj and sort() the array (or the children property) based on your preference

Below is the code implementing steps 1 and 2 (execute this in node):

var util = require('util');
var old_arr = [{
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A'
}, {
    id: 2,
    sort: 1,
    parentId: 1,
    name: 'A.1'
}, {
    id: 3,
    sort: 2,
    parentId: 1,
    name: 'A.2'
}, {
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B'
}];

var new_obj = {};
for (var i = 0; i < old_arr.length; i++){
    if ( old_arr[i].parentId == null )
        new_obj[ old_arr[i].id ] = old_arr[i];
}

for (var i = 0; i < old_arr.length; i++){
    if ( old_arr[i].parentId == null ) continue;
    new_obj[ old_arr[i].parentId ].children = new_obj[ old_arr[i].parentId ].children || [];
    new_obj[ old_arr[i].parentId ].children.push( old_arr[i] );
}

console.log(util.inspect(new_obj, {showHidden: false, depth: null}));

Organize an array of objects in JavaScript into a structure with nested children

Answer №1

Answer №2

Answer №3

Similar questions

The nightwatch.js script is halting operations once the test suite has been completed

Displaying URLs stylishly with Pills Bootstrap

Implement a customized toString method for components in ReactJS

"Utilizing datatables to efficiently submit form data to the server-side

How to translate a list of integers into JSON format using Java

The Bootstrap tooltip effectively fades away after displaying text, but it is not positioned correctly above the icon

Transforming multi-dimensional arrays into database structures

Unexpected behavior from Bootstrap within React

At times, MomentJS may miscalculate and add an incorrect number of hours

Guidelines for accessing the value of the parent function upon clicking the button within the child function?

Utilizing JavaScript for form creation

Press the Enter key to submit

implement a JavaScript function for sprite toggling

Retrieving the length of an array from Firebase Firestore

The issue with Google Maps API not loading is being caused by a problem with the function window.handleApiReady not being

What's the process for assigning a webpack ChunkName in a Vue project?

Is there a way to format wrapped lines with indentation in an unordered list?

A streamlined method for populating an array with the lengths of words extracted from a text file

Is there a way to utilize a MongoDB plugin to retrieve results directly as a return value instead of within a callback function?

Using jQuery .css({}) is not causing negative margin to function as expected