Arranging data in a JSON array while handling null values in JavaScript

Question

Arranging data in a JSON array while handling null values in JavaScript

Here is my JSON array:

var jData = [
{id: 1, parent: null},
{id: 2, parent: null},
{id: 3, parent: 1},
{id: 4, parent: 2},
{id: 5, parent: 2},
{id: 6, parent: 1}];

I would like to sort it in the following order (first by id then by parent):

[
    {id: 1, parent: null},
    {id: 3, parent: 1},
    {id: 6, parent: 1}
    {id: 2, parent: null},    
    {id: 4, parent: 2},
    {id: 5, parent: 2},
];

What is the most efficient way to achieve this in JavaScript?

I have attempted to use the following code, but with no success:

jData .sort((a, b) => a.id - b.id || a.parent - b.parent);

Please assist!

javascript arrays json sorting knockout.js

Answer 1

Answer №1

In order to properly organize the data, you must first implement a topological sorting algorithm to arrange the nodes based on their appearance.

function manipulateData(array) {
    return array.flatMap(({ information, children = [] }) => [information, ...manipulateData(children)]);
}

var data = [{ id: 1, parent: null }, { id: 2, parent: null }, { id: 3, parent: 1 }, { id: 4, parent: 2 }, { id: 5, parent: 2 }, { id: 6, parent: 1 }],
    tree = function (data, root) {
        var t = {};
        data.forEach(data => {
            Object.assign(t[data.id] = t[data.id] || {}, { data });
            t[data.parent] = t[data.parent] || {};
            t[data.parent].children = t[data.parent].children || [];
            t[data.parent].children.push(t[data.id]);
        });
        return t[root].children;
    }(data, null),
    result = manipulateData(tree);

console.log(result);
console.log(tree); // just to show what's happening

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

Answer 2

In order to properly organize the data, you must first implement a topological sorting algorithm to arrange the nodes based on their appearance.

function manipulateData(array) {
    return array.flatMap(({ information, children = [] }) => [information, ...manipulateData(children)]);
}

var data = [{ id: 1, parent: null }, { id: 2, parent: null }, { id: 3, parent: 1 }, { id: 4, parent: 2 }, { id: 5, parent: 2 }, { id: 6, parent: 1 }],
    tree = function (data, root) {
        var t = {};
        data.forEach(data => {
            Object.assign(t[data.id] = t[data.id] || {}, { data });
            t[data.parent] = t[data.parent] || {};
            t[data.parent].children = t[data.parent].children || [];
            t[data.parent].children.push(t[data.id]);
        });
        return t[root].children;
    }(data, null),
    result = manipulateData(tree);

console.log(result);
console.log(tree); // just to show what's happening

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

Answer 3

Answer №2

In cases where the parent is null, we assign the id as the parent value and proceed to sort by parent first in order to achieve the desired outcome. If the comparison between parent values results in a tie, we then sort by id.

var jData = [{id:5,parent:2},{id:1,parent:null},{id:4,parent:2},{id:2,parent:null},{id:3,parent:1},{id:6,parent:1}];

let res = jData.sort((a,b) => {
  let ap = a.parent ? a.parent : a.id,
      bp = b.parent ? b.parent : b.id;
  return ap - bp || a.id - b.id;
});

console.log(res);

Answer 4

In cases where the parent is null, we assign the id as the parent value and proceed to sort by parent first in order to achieve the desired outcome. If the comparison between parent values results in a tie, we then sort by id.

var jData = [{id:5,parent:2},{id:1,parent:null},{id:4,parent:2},{id:2,parent:null},{id:3,parent:1},{id:6,parent:1}];

let res = jData.sort((a,b) => {
  let ap = a.parent ? a.parent : a.id,
      bp = b.parent ? b.parent : b.id;
  return ap - bp || a.id - b.id;
});

console.log(res);

Answer 5

Answer №3

If you want to organize each array based on its parent, you can utilize the reduce function. When the parent is null, assign it a value of 0. Another reduce can then be used to build the final array.

var data = [{"id":1,"parent":null},{"id":2,"parent":null},{"id":3,"parent":1},{"id":4,"parent":2},{"id":5,"parent":2},{"id":6,"parent":1}]

var temp = data.reduce((acc, cur) => {
  let parentNode = cur.parent || 0;
  acc[parentNode] = acc[parentNode] || [];
  acc[parentNode].push(cur);
  return acc;
}, {});

var organizedData = temp[0].reduce((acc, cur) => {
  var childArray = temp[cur.id] || [];
  childArray.sort((a, b) => a.id - b.id); // Sort in case the IDs are not sequential in the original array.
  acc.push(cur, ...childArray);
  return acc;
}, []);


console.log(organizedData);

Answer 6

If you want to organize each array based on its parent, you can utilize the reduce function. When the parent is null, assign it a value of 0. Another reduce can then be used to build the final array.

var data = [{"id":1,"parent":null},{"id":2,"parent":null},{"id":3,"parent":1},{"id":4,"parent":2},{"id":5,"parent":2},{"id":6,"parent":1}]

var temp = data.reduce((acc, cur) => {
  let parentNode = cur.parent || 0;
  acc[parentNode] = acc[parentNode] || [];
  acc[parentNode].push(cur);
  return acc;
}, {});

var organizedData = temp[0].reduce((acc, cur) => {
  var childArray = temp[cur.id] || [];
  childArray.sort((a, b) => a.id - b.id); // Sort in case the IDs are not sequential in the original array.
  acc.push(cur, ...childArray);
  return acc;
}, []);


console.log(organizedData);

Arranging data in a JSON array while handling null values in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

How can I conditionally disable a button in Vue.js using an if statement?

What is the best way to combine dictionaries from multiple lists (JSONs) in Python?

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

Retrieve the quantity of files in a specific directory by implementing AJAX within a chrome extension

Stable header that jumps to the top when scrolled

Angular JavaScript does not take effect on elements inserted into ui-view

When retrieving data from an API, JSON serialization will handle any instances of blank or null

Using Javascript to modify a json file

Updating the AngularJS view following a deletion process

Forcing a property binding update in Angular 2

Obtaining NodeJS from a mysterious subdirectory

Enable users to input their custom code and run it when the specified conditions are met

What is the best way to trigger an ajax request when a user selects a tab?

JavaScript: The variable `scopes` is declared

Create your own custom block on the frontend product page

Error in Typescript: The type 'Element' does not have a property named 'contains'

Ways to resolve BuildJobExitNonZero issue on Digital Ocean

Save this as a data structure

Converting JSON to model in Flutter/Dart using a Map property

Customizing Echart tooltip appearance