Sort through a never-ending series of nested objects

Question

Sort through a never-ending series of nested objects

Consider an array of nested objects like the following:

const data = [
    {
        id: 1,
        children:[
            {
                id: 2,
                children:[
                    {
                        id: 3,
                        children:[
                            {
                                id: 4,
                                children: [],
                            },
                            {
                                id: 5,
                                children: [],
                            }
                        ],
                    },
                ],
            },
        ],
    },
    {
        id: 8,
        children:[
            {
                id: 9,
                children:[
                    {
                        id: 10,
                        children:[],
                    },
                ],
            },
        ],
    },
];

If you want to create a new array with id: 3 excluded, the resulting array should be like this:

const data = [
    {
        id: 1,
        children:[
            {
                id: 2,
                children:[],
            },
        ],
    },
    {
        id: 8,
        children:[
            {
                id: 9,
                children:[
                    {
                        id: 10,
                        children:[],
                    },
                ],
            },
        ],
    },
];

You can exclude an id from any level, and the id along with its children should be eliminated. Do you need advice on the best approach to achieve this? Feel free to share any unsuccessful attempts you have made so far.

javascript arrays filtering

Answer 1

Answer №1

To tackle this problem, consider utilizing recursion in combination with the `Array.reduce` method.

For instance:

const data=[{id:1,children:[{id:2,children:[{id:3,children:[{id:4,children:[]},{id:5,children:[]}]},]},]},{id:8,children:[{id:9,children:[{id:10,children:[]},]},]},]


function removeId(data, id) {
  return data.reduce((a,v) => {
    if (v.id !== id) 
       a.push({...v, children: removeId(v.children, id)});
    return a;
  }, []);
}

const r = removeId(data, 3);

console.log(r);

Answer 2

To tackle this problem, consider utilizing recursion in combination with the `Array.reduce` method.

For instance:

const data=[{id:1,children:[{id:2,children:[{id:3,children:[{id:4,children:[]},{id:5,children:[]}]},]},]},{id:8,children:[{id:9,children:[{id:10,children:[]},]},]},]


function removeId(data, id) {
  return data.reduce((a,v) => {
    if (v.id !== id) 
       a.push({...v, children: removeId(v.children, id)});
    return a;
  }, []);
}

const r = removeId(data, 3);

console.log(r);

Answer 3

Answer №2

To access each node of the object, a combination of JSON.parse and JSON.stringify can be used:

JSON.parse(JSON.stringify(data, (key, value) => {
   // Removes any child with an id of 3 from the children array
   if (key === 'children' && value instanceof Array) return value.filter(x=>x.id!==3);
   // Leaves other properties unchanged
   return value;
}));

For example:

const data = [
    {
        id: 1,
        children:[
            {
                id: 2,
                children:[
                    {
                        id: 3,
                        children:[
                            {
                                id: 4,
                                children: [],
                            },
                            {
                                id: 5,
                                children: [],
                            }
                        ],
                    },
                ],
            },
        ],
    },
    {
        id: 8,
        children:[
            {
                id: 9,
                children:[
                    {
                        id: 10,
                        children:[],
                    },
                ],
            },
        ],
    },
];

console.log(JSON.parse(JSON.stringify(data, (key, value) => {
   if (key === 'children' && value instanceof Array) return value.filter(x=>x.id!==3);
   return value;
})));

Using the native browser implementation of the JSON methods, this approach is typically faster.

Answer 4

To access each node of the object, a combination of JSON.parse and JSON.stringify can be used:

JSON.parse(JSON.stringify(data, (key, value) => {
   // Removes any child with an id of 3 from the children array
   if (key === 'children' && value instanceof Array) return value.filter(x=>x.id!==3);
   // Leaves other properties unchanged
   return value;
}));

For example:

const data = [
    {
        id: 1,
        children:[
            {
                id: 2,
                children:[
                    {
                        id: 3,
                        children:[
                            {
                                id: 4,
                                children: [],
                            },
                            {
                                id: 5,
                                children: [],
                            }
                        ],
                    },
                ],
            },
        ],
    },
    {
        id: 8,
        children:[
            {
                id: 9,
                children:[
                    {
                        id: 10,
                        children:[],
                    },
                ],
            },
        ],
    },
];

console.log(JSON.parse(JSON.stringify(data, (key, value) => {
   if (key === 'children' && value instanceof Array) return value.filter(x=>x.id!==3);
   return value;
})));

Using the native browser implementation of the JSON methods, this approach is typically faster.

Sort through a never-ending series of nested objects

Answer №1

Answer №2

Similar questions

The program keeps encountering the issue of returning undefined while attempting to calculate the sum of elements in an array

Refreshing the page resolves unhandled errors that occur when an item is removed from local storage

The console does not display the JSON data for requests and responses

The React functional component captures a snapshot of its state when initializing a websocket event handler

Arranging Alphanumeric Characters in Typescript

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

Identify when a click occurs outside of a text input

React JS issue with SVG linearGradient not displaying accurate values

What is the best way to explore JavaScript text using Firebug?

Newbie: Troubleshooting Vue Errors - "Vue is not recognized"

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

Exploring the possibilities of node-webkit: node-odbc encounters a setback

When implementing auto-generated IDs in HTML forms, rely on randomly generated values for increased uniqueness

Experiencing an issue of receiving an undefined value while attempting to retrieve a value from an input box

Determining the duration since generating a unique objectid in mongodb

What is the best way to display a message on the 403 client side when an email sending fails?

Content that moves with a flick of a finger

I'm finding it difficult to grasp the purpose of $inject within controllers

How can I combine multiple textures from mtlLoader and objLoader in three.js?

"Exploring the seamless integration of easyXDM, AJAX, and En