What is the best method for transforming a nested object into an array of objects?

Question

What is the best method for transforming a nested object into an array of objects?

This object contains nested data

var arr = [{
    "children": [{
        "children": [{
            "children": [],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}]

The goal is to transform the above structure into this format:

[{
    "Name": "C",
    "Id": 3,
    "Image": "http://imgUrl"
}, {
    "Name": "B",
    "Id": 2,
    "Image": "http://imgUrl"
}, {
    "Name": "A",
    "Id": 1,
    "Image": "http://imgUrl"
}]

Below is the original conversion function:

    var newArr = []
    function getNestedObj(obj){

        if(obj.length){
            for ( var i=0; i<obj.length; i++){
                var newObj = {};
                newObj.Name = obj[i].Name;
                newObj.Id = obj[i].Id;
                newObj.Image = obj[i].Image;
                newArr.push(newObj);

                if(obj[i].children.length !=0 ){
                    getNestedObj(obj[i].children)
                }
                else {
                    return newArr;
                }
        }
       }
    }

How can I simplify this function?

javascript arrays json object

Answer 1

Answer №1

Give this a try:

let arr = [{"children":[{"children":[{"children":[],"Id":1,"Name":"A","Image":"http://imgUrl"}],"Id":2,"Name":"B","Image":"http://imgUrl"}],"Id":3,"Name":"C","Image":"http://imgUrl"}];

function gatherChildren(a, r=[]) {
  a.forEach(({children, ...rest}) => {
    r.push(rest);
    if(children) gatherChildren(children, r);
  });
  return r;
}
let finalResult = gatherChildren(arr);
console.log(finalResult);

Answer 2

Give this a try:

let arr = [{"children":[{"children":[{"children":[],"Id":1,"Name":"A","Image":"http://imgUrl"}],"Id":2,"Name":"B","Image":"http://imgUrl"}],"Id":3,"Name":"C","Image":"http://imgUrl"}];

function gatherChildren(a, r=[]) {
  a.forEach(({children, ...rest}) => {
    r.push(rest);
    if(children) gatherChildren(children, r);
  });
  return r;
}
let finalResult = gatherChildren(arr);
console.log(finalResult);

Answer 3

Answer №2

Recursive Function to Fill with Children:

const populateChildren = (arr = []) =>
arr.reduce(
    (filledArray, { children, ...others }) =>
        filledArray
            .concat(others)
            .concat(populateChildren(children)),
    [],
);
populateChildren(arrayToPopulate);

Answer 4

Recursive Function to Fill with Children:

const populateChildren = (arr = []) =>
arr.reduce(
    (filledArray, { children, ...others }) =>
        filledArray
            .concat(others)
            .concat(populateChildren(children)),
    [],
);
populateChildren(arrayToPopulate);

Answer 5

Answer №3

One way to achieve this is by using a recursive reduce function.

arr.reduce (function spr (res, cur) {
    let obj = {...cur}
    let children = obj.children
    delete obj.children;
    return children.reduce (spr, res).concat ([{
        ...obj
    }])
}, [])

let result = arr.reduce (function spr (res, cur) {
    let obj = {...cur}
    let children = obj.children;
    delete obj.children;
    return children.reduce (spr, res).concat ([{
      ...obj
    }])
}, [])

console.log (result)

<script>
var arr = [{
    "children": [{
        "children": [{
            "children": [{
                "children": [],
                "Id": 1,
                "Name": "A",
                "Image": "http://imgUrl"
            }],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2,
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}
, {
    "children": [{
        "children": [{
            "children": [],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2,
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}]
</script>

Answer 6

One way to achieve this is by using a recursive reduce function.

arr.reduce (function spr (res, cur) {
    let obj = {...cur}
    let children = obj.children
    delete obj.children;
    return children.reduce (spr, res).concat ([{
        ...obj
    }])
}, [])

let result = arr.reduce (function spr (res, cur) {
    let obj = {...cur}
    let children = obj.children;
    delete obj.children;
    return children.reduce (spr, res).concat ([{
      ...obj
    }])
}, [])

console.log (result)

<script>
var arr = [{
    "children": [{
        "children": [{
            "children": [{
                "children": [],
                "Id": 1,
                "Name": "A",
                "Image": "http://imgUrl"
            }],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2,
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}
, {
    "children": [{
        "children": [{
            "children": [],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2,
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}]
</script>

What is the best method for transforming a nested object into an array of objects?

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging React's State Values and Props

Extracting live content from a website within a native Webview

The functionality of using multiple inputs with Google Places API is not functioning as expected

Having trouble dynamically assigning the ng-model attribute

Unexpected Behavior Arises from Axios Get API Request

Insert a new <tr> element into a dynamic table using PHP and jQuery without the need to refresh the page

I am facing issues with my submit buttons as they are not functioning

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

Similar to AngularJS, jQuery also provides a powerful tool for submitting forms

What are the reasons for the various methods available for importing my JS code?

Ways to stop the default action in a confirm dialog while using Angular JS

Popstate functionality not functioning correctly, requiring multiple consecutive clicks

What is the best way to output a JSX element using an inline switch statement?

Updating PostgreSQL data by removing a key/value pair from a JSONB column

Retrieve the list of device tokens for the APNS service

Switching the endpoint renders the middleware ineffective

Searching in real-time with ajax in CodeIgniter framework is a seamless and efficient process

Relaunch node.js in pm2 after a crash

Troubleshooting 404 errors with Cordova, AngularJS, and Node.js (Express) when using $http with

Updating dynamic parameter in a NextJS 13 application router: A complete guide