Flatten an array with nested objects

Question

I have an array with objects, that can have children, the children have the same structure as the parent, it's just object nesting basically.

I'm wondering how I can flatten the structure of my objects so I have the id's of all the objects, including the nested one's.

For example, This structure

const data = [
  {
    id: 2,
    children: [
      {
        id: 1,
        children: []
      }
    ]
  },
  {
    id: 3,
    children: [],
  }
]

Should be flattened to this

const data = [2,1,3]

I've tried

Using Array.reduce() and the object spread syntax, but I can't wrap my head around the logic required to do this.

wang · Accepted Answer · 2019-03-15 09:29:48Z

5

const data = [
  {
    id: 2,
    children: [
      {
        id: 1,
        children: []
      }
    ]
  },
  {
    id: 3,
    children: [],
  }
]

const getIds = (data) => data.map(d => [d.id, ...getIds(d.children)]).flat()

console.log(getIds(data))

answered Mar 15, 2019 at 9:29

wang

1,78012 silver badges20 bronze badges

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

2 Comments

mplungjan Over a year ago

This is elegant

Miguel Stevens Over a year ago

I've accepted this answer, like the one-line! Thanks

Quentin · Accepted Answer · 2019-03-15 09:27:20Z

This is a job for recursion. Loop over the array and for each element in it, push the id into a new array and repeat for the children.

const data = [{
    id: 2,
    children: [{
      id: 1,
      children: []
    }]
  },
  {
    id: 3,
    children: [],
  }
];

console.log(flatten(data));

function flatten(data) {
  const result = [];
  recursive(data);
  return result;

  function recursive(data) {
    data.forEach(member => {
      result.push(member.id);
      recursive(member.children);
    });
  }
}

Snow · Accepted Answer · 2019-03-15 09:26:06Z

1

You can use JSON.stringify, and for each key of id, push to an array:

const data = [
  {
    id: 2,
    children: [
      {
        id: 1,
        children: []
      }
    ]
  },
  {
    id: 3,
    children: [],
  }
]
const ids = [];
JSON.stringify(data, (key, val) => {
  if (key === 'id') {
    ids.push(val);
  }
  return val;
});
console.log(ids);

answered Mar 15, 2019 at 9:26

Snow

4,1463 gold badges16 silver badges43 bronze badges

2 Comments

mplungjan Over a year ago

Ohhh - Cool. I had no idea stringify took parameters. I also used stringify and then a regex

mplungjan Over a year ago

Strangely enough this does not recurse: JSON.stringify(data,["id"])

Pranav C Balan · Accepted Answer · 2019-03-15 09:27:42Z

You can do some recursive approach.

function flatArr(arr, res) {
  // iterate over the array
  arr.forEach(o => {
    // check id is present then push it into the result array
    if ('id' in o) res.push(o.id)
    // check children is present and non-empty
    // then ecursively call the function
    if (o.children && o.children.length) flatArr(o.children, res);
  })
  // return the result array(optional)
  return res;
}

console.log(flatArr(data, []));

const data = [{
    id: 2,
    children: [{
      id: 1,
      children: []
    }]
  },
  {
    id: 3,
    children: [],
  }
];

function flatArr(arr, res) {
  // iterate over the array
  arr.forEach(o => {
    // check id is present then push it into the result array
    if ('id' in o) res.push(o.id)
    // check children is present and non-empty
    // then ecursively call the function
    if (o.children && o.children.length) flatArr(o.children, res);
  })
  // return the result array(optional since it's the same array reference you are passing initially)
  return res;
}

console.log(flatArr(data, []));

Maheer Ali · Accepted Answer · 2019-03-15 09:45:56Z

You can use recursion.Note that is below code reference of arr is passed so we can directly push() ids to it and no need to get return value

const data = [{ id: 2, children: [{ id: 1, children: [] }] }, { id: 3, children: [], } ]

function getIds(data,arr){
  //iterate over array of chilren
  for(let child of data){
    //add id of each child to arr
    arr.push(child.id);
    //check if child have children add its 'ids' to same array
    if(child.children) getIds(child.children,arr);
  }
  //return array in end
  return arr;
}
console.log(getIds(data,[]))

mplungjan · Accepted Answer · 2019-03-15 10:00:50Z

1

I do not like recursions :)

Do note the other Stringify answer - ILST
https://stackoverflow.com/a/55179326/295783

const data=[{id:2,children:[{id:1,children:[]}]},{id:3,children:[],}];

console.log(
  JSON.stringify(data)
    .match(/(?:"id":)(\d+)/g)
    .map(v => +v.replace(/"id":/g, ""))
)

I however wish someone could find me a way to ignore the non-capturing group in one go

edited Mar 15, 2019 at 10:00

answered Mar 15, 2019 at 9:41

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

Maheer Ali Over a year ago

Convert each value to Number. Really odd solution +1

mplungjan Over a year ago

@MaheerAli Done ;)

mplungjan · Accepted Answer · 2019-03-15 10:35:54Z

1

You could reduce the array of objects by using the actual id and get their children objects.

const
    getId = array => array.reduce(
        (r, { id, children }) => [...r, id, ...getId(children)],
        []
    ),
    data = [{ id: 2, children: [{ id: 1, children: [] }] }, { id: 3, children: [] }],
    ids = getId(data);
    
console.log(ids);

edited Mar 15, 2019 at 10:35

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Mar 15, 2019 at 9:29

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Hassan Imam · Accepted Answer · 2019-03-15 09:29:27Z

0

You can use a recursive approach and iterate for each children and push all the id in an array.

const data = [{ id: 2, children: [{ id: 1, children: [] }] }, { id: 3, children: [], } ],
      getId = (data) => data.reduce((r,{id, children}) => r.concat(id, getId(children)),[]);
console.log(getId(data));

answered Mar 15, 2019 at 9:29

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

Someone · Accepted Answer · 2019-03-15 10:09:59Z

0

Another version. Not the prettiest but gets the job done:

const data = [
    {
        id: 2,
        children: [
            {
                id: 1,
                children: []
            }
        ]
    },
    {
        id: 3,
        children: [],
    }
];
    
let mappedArray = data.map(num => [].concat(num.children.map(child => child.id)).concat(num.id));
    mappedArray = [].concat.apply([], mappedArray);

console.log(mappedArray);

edited Mar 15, 2019 at 10:09

answered Mar 15, 2019 at 10:03

Someone

3,5881 gold badge28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Flatten an array with nested objects

I've tried

9 Answers 9

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

I've tried

9 Answers 9

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Related