How to simplify conversion of nested object into array of objects?

Question

This is my nested Object

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"
}]

I wanted to convert the above to the following format

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

I wrote below code to do this

    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;
                }
        }
       }
    }

I want to simplify the above function? How can I achieve this?

Right now your code is working as expected? Or it is giving some error or unexpected result? If it is working, maybe you should go to codereview.stackexchange.com to ask — Calvin Nunes
– Calvin Nunes, Commented Sep 19, 2018 at 11:35
@ramya-selvaraj You're missing a comma after "Id": 2. I can't edit it since an edit needs to be at least 6 characters. — JasperZelf
– JasperZelf, Commented Sep 19, 2018 at 11:37

Nikhil Aggarwal · Accepted Answer · 2018-09-19 12:00:51Z

9

Try following

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 fillWithChildren(a, r=[]) {
  a.forEach(({children, ...rest}) => {
    r.push(rest);
    if(children) fillWithChildren(children, r);
  });
  return r;
}
let result = fillWithChildren(arr);
console.log(result);

edited Sep 19, 2018 at 12:00

answered Sep 19, 2018 at 11:36

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Koushik Chatterjee Over a year ago

Superv, +1 for using ...rest destruction from object. You could use (a, r=[]) as optional parameter in order to avoid declaration of result and manually send it, and populating in the output in the given array (supplied from calling end). Instead you can declare optional with init, and return it.

Nikhil Aggarwal Over a year ago

@KoushikChatterjee - Thank you for sharing your thoughts. I have incorporated it. Thanks!

RS17 Over a year ago

@NikhilAggarwal Thanks a lot for the solution. Can you please explain it? I'm not clear about ...rest??

Nikhil Aggarwal Over a year ago

@RamyaSelvaraj - It is an ES6 concept, and as the name suggest it means a collection of the remaining items. For details - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Stephan Hovius · Accepted Answer · 2018-09-19 12:09:35Z

4

Recursive Reduce:

const fillWithChildren = (a = []) =>
a.reduce(
    (result, { children, ...rest }) =>
        result
            .concat(rest)
            .concat(fillWithChildren(children)),
    [],
);
fillWithChildren(arr);

answered Sep 19, 2018 at 12:09

Stephan Hovius

3911 silver badge6 bronze badges

1 Comment

Stephan Hovius Over a year ago

Edited my answer: set a default value, no ternary needed anymore.

Moritz Roessler · Accepted Answer · 2018-09-19 12:30:40Z

4

This can be as simple as a recursive reduce.

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>

edited Sep 19, 2018 at 12:30

answered Sep 19, 2018 at 11:40

Moritz Roessler

8,67329 silver badges57 bronze badges

2 Comments

Moritz Roessler Over a year ago

@StephanHovius Yes, it is? spr is the function used for reduce, look at the line children.reduce (spr,...), that's a recursive call.

HMR Over a year ago

Yes, I missed it. If you use spread you could make it shorter using default with rest spread: arr.reduce(function spr(res, { children = [], ...rest }) { return children.reduce(spr, res).concat(rest); }, [])

Collectives™ on Stack Overflow

How to simplify conversion of nested object into array of objects?

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related