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

3

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

answered Mar 15, 2019 at 9:27

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

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

1

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,[]))

edited Mar 15, 2019 at 9:45

answered Mar 15, 2019 at 9:30

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

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

Your Answer

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

Your Answer

Sign up or log in

Post as a guest

Linked

Related