Traversing a nested array in JavaScript to create a nested object in a loop

Question

Traversing a nested array in JavaScript to create a nested object in a loop

Struggling with translating a depth list into a nested object.

Consider this list:

"depth": [ 0, 1, 2, 3, 3, 2, 3, 3, 3 ],

I'm trying to create a recursive function that generates an object like this:

"depth": [
        {
            "type": 0,
            "children": [
                {
                    "type": 1,
                    "children": [
                        {
                            "type": 2,
                            "children":[
                                { "type": 3, "children": []},
                                { "type": 3, "children": []},
                            ]
                        },
                        {
                            "type:": 2,
                            "children":[
                                { "type": 3, "children": []},
                                { "type": 3, "children": []},
                                { "type": 3, "children": []},
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

The lower numbers represent parents, while the higher numbers are siblings of the previous lower number.

I've managed to map children to parents in my code so far, but I'm struggling with generating the final result. Any suggestions would be greatly appreciated.

Thanks!

javascript arrays object recursion nested

Answer 1

Answer №1

One efficient way to construct a tree structure is by utilizing a Map or dictionary (object) for easy parent retrieval. By transforming the entire tree into a Map, it becomes simpler to access the root node which represents the complete tree.

const createNode = (type) => ({ type, children: [] })

const buildTree = (arr, root) => arr.reduce((acc, d) => {  
  const parent = d - 1
  
  const node = createNode(d)
  
  if(d !== root && !acc.has(parent)) acc.set(parent, createNode(parent))
  
  if(d !== root) acc.get(parent).children.push(node)
  
  return acc.set(d, node);
}, new Map()).get(root);

const depthLevels = [0, 1, 2, 3, 3, 2, 3, 3, 3 ]

const finalTree = buildTree(depthLevels, 0)

console.log(finalTree)

Answer 2

One efficient way to construct a tree structure is by utilizing a Map or dictionary (object) for easy parent retrieval. By transforming the entire tree into a Map, it becomes simpler to access the root node which represents the complete tree.

const createNode = (type) => ({ type, children: [] })

const buildTree = (arr, root) => arr.reduce((acc, d) => {  
  const parent = d - 1
  
  const node = createNode(d)
  
  if(d !== root && !acc.has(parent)) acc.set(parent, createNode(parent))
  
  if(d !== root) acc.get(parent).children.push(node)
  
  return acc.set(d, node);
}, new Map()).get(root);

const depthLevels = [0, 1, 2, 3, 3, 2, 3, 3, 3 ]

const finalTree = buildTree(depthLevels, 0)

console.log(finalTree)

Answer 3

Answer №2

When receiving the data in pre-order sequence, it is unnecessary to use a map:

function convert(data) {
    let i = 0;
    
    function getChildren(type) {
        let children = [];
        while (data[i] === type) {
            i++;
            children.push({
                type,
                children: getChildren(type + 1)
            });
        }
        return children;
    }
    
    return getChildren(0);
}

let data = [0, 1, 2, 3, 3, 2, 3, 3, 3];
console.log(convert(data));

Answer 4

When receiving the data in pre-order sequence, it is unnecessary to use a map:

function convert(data) {
    let i = 0;
    
    function getChildren(type) {
        let children = [];
        while (data[i] === type) {
            i++;
            children.push({
                type,
                children: getChildren(type + 1)
            });
        }
        return children;
    }
    
    return getChildren(0);
}

let data = [0, 1, 2, 3, 3, 2, 3, 3, 3];
console.log(convert(data));

Traversing a nested array in JavaScript to create a nested object in a loop

Answer №1

Answer №2

Similar questions

Adjusting the height of an element in AngularJS based on its width dynamically

Transmitting HTML5 application settings via URL

What is the correct way to customize colors for specific components in Material-ui?

Having trouble with Fancybox loading images from an external URL?

Guidelines for utilizing a loader to handle a TypeScript-based npm module

Autocomplete feature in Material-UI does not trigger the onChange event when a chip

Issue with Abide Validation Events not triggering in Reveal Modal for Foundation Form

Can Express.Multer.File be inserted into a FormData object easily?

Sluggish Bootstrap Carousel Requires Mouseover or Click to Start Sliding

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

What is the reason that Gatsby's arrow function is unable to access a value from props that is calculated from a promise?

Can the value of a key be changed to match the condition in a find() query when using Mongoose?

Incorporating traditional Bootstrap styling directly into a React application without relying on the react-bootstrap library

Tips for adjusting the size of a three-dimensional cylinder in three.js

Tips for storing and retrieving high scores in a JavaScript game

How can you effectively manage Click events within a three.js environment?

AngularJS - Array binding issue not updating in directive

Validation of check boxes in AngularJS group

verifying that all characters in an array are permissible

CSS footer element refuses to disappear