How to flatten nested array of object using es6

Question

I have this array of objects, within it I have another array of objects:

[
  {
    id: 1,
    country: [
      {
        id: "5a60626f1d41c80c8d3f8a85"
      },
      {
        id: "5a6062661d41c80c8b2f0413"
      }
    ]
  },
  {
    id: 2,
    country: [
      {
        id: "5a60626f1d41c80c8d3f8a83"
      },
      {
        id: "5a60626f1d41c80c8d3f8a84"
      }
    ]
  }
];

How to get flat array of country like this:

[
  { id: "5a60626f1d41c80c8d3f8a85" },
  { id: "5a6062661d41c80c8b2f0413" },
  { id: "5a60626f1d41c80c8d3f8a83" },
  { id: "5a60626f1d41c80c8d3f8a84" }
];

without using a forEach and a temp variable?

When I did:

(data || []).map(o=>{
  return o.country.map(o2=>({id: o2.id}))
})

I got the same structure back.

nem035 · Accepted Answer · 2021-03-05 09:45:03Z

36

Latest edit

All modern JS environments now support Array.prototype.flat and Array.prototype.flatMap

const data=[{id:1,country:[{id:"5a60626f1d41c80c8d3f8a85"},{id:"5a6062661d41c80c8b2f0413"}]},{id:2,country:[{id:"5a60626f1d41c80c8d3f8a83"},{id:"5a60626f1d41c80c8d3f8a84"}]}];

console.log(
  data.flatMap(
    (elem) => elem.country
  )
)

Old answer

No need for any ES6 magic, you can just reduce the array by concatenating inner country arrays.

const data=[{id:1,country:[{id:"5a60626f1d41c80c8d3f8a85"},{id:"5a6062661d41c80c8b2f0413"}]},{id:2,country:[{id:"5a60626f1d41c80c8d3f8a83"},{id:"5a60626f1d41c80c8d3f8a84"}]}];

console.log(
  data.reduce(
    (arr, elem) => arr.concat(elem.country), []
  )
)

If you want an ES6 feature (other than an arrow function), use array spread instead of the concat method:

const data=[{id:1,country:[{id:"5a60626f1d41c80c8d3f8a85"},{id:"5a6062661d41c80c8b2f0413"}]},{id:2,country:[{id:"5a60626f1d41c80c8d3f8a83"},{id:"5a60626f1d41c80c8d3f8a84"}]}];

console.log(
  data.reduce(
    (arr, elem) => [...arr, ...elem.country], []
  )
)

Note: These suggestions would create a new array on each iteration.

For efficiency, you have to sacrifice some elegance:

const data=[{id:1,country:[{id:"5a60626f1d41c80c8d3f8a85"},{id:"5a6062661d41c80c8b2f0413"}]},{id:2,country:[{id:"5a60626f1d41c80c8d3f8a83"},{id:"5a60626f1d41c80c8d3f8a84"}]}];

console.log(
  data.reduce(
    (arr, elem) => {
      for (const c of elem.country) {
        arr.push(c);
      }
      return arr;
    }, []
  )
)

edited Mar 5, 2021 at 9:45

answered Jan 25, 2018 at 4:17

nem035

35.5k6 gold badges93 silver badges104 bronze badges

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

3 Comments

Jane Emelia Over a year ago

spread work if my country only have id property, which usually is not the case.

Jane Emelia Over a year ago

what if I want ['id1','id2','id3','id4'] will I still use reduce?

nem035 Over a year ago

You can just insert country.map(({ id }) => id) instead of country in any of the examples.

Jecfish · Accepted Answer · 2018-01-25 12:26:34Z

3

const raw = [
  {
    id: 1,
    country: [
      {
        id: "5a60626f1d41c80c8d3f8a85"
      },
      {
        id: "5a6062661d41c80c8b2f0413"
      }
    ]
  },
  {
    id: 2,
    country: [
      {
        id: "5a60626f1d41c80c8d3f8a83"
      },
      {
        id: "5a60626f1d41c80c8d3f8a84"
      }
    ]
  }
];

const countryIds = raw
                    .map(x => x.country)
                    .reduce((acc, curr) => {
                      return [
                        ...acc, 
                        ...curr.map(x => x.id)
                      ];
                    }, []);
console.log(countryIds)

answered Jan 25, 2018 at 12:26

Jecfish

4,2211 gold badge22 silver badges16 bronze badges

Comments

Ayush Gupta · Accepted Answer · 2018-01-25 04:43:31Z

0

This, works, just concat the nested arrays returned by your solution

let arr = [{    "id": 1,
    "country": [{
        "id": "5a60626f1d41c80c8d3f8a85",
      },
      {
        "id": "5a6062661d41c80c8b2f0413",
      }
    ]
  },
  {
    "id": 2,
    "country": [{
        "id": "5a60626f1d41c80c8d3f8a83",
      },
      {
        "id": "5a60626f1d41c80c8d3f8a84",
      }
    ]
  }
];

//If you want an array of country objects
console.log([].concat.apply(...(arr || []).map(o=> o.country)))

//If you can an array od country ids
console.log([].concat.apply(...(arr || []).map(o=> o.country.map(country => country.id))))

edited Jan 25, 2018 at 4:43

answered Jan 25, 2018 at 4:13

Ayush Gupta

9,36511 gold badges63 silver badges98 bronze badges

4 Comments

Jane Emelia Over a year ago

what if I don't want object, I want pure id in my array?

Ayush Gupta Over a year ago

You mean something like [ '5a60626f1d41c80c8d3f8a85', '5a6062661d41c80c8b2f0413', '5a60626f1d41c80c8d3f8a83', '5a60626f1d41c80c8d3f8a84' ]?

Jane Emelia Over a year ago

Saw the answer, concat is too confusing, any es6 code?

Ayush Gupta Over a year ago

The reduce answer posted by @nem035 is the ES6 equivalent of this

Talgat Saribayev · Accepted Answer · 2018-01-26 05:06:08Z

0

Ayush Gupta's solution will work for this case. But I would like to provide other solution.

const arr = [
  {
    id: 1,
    country: [
      {
        id: '5a60626f1d41c80c8d3f8a85'
      },
      {
        id: '5a6062661d41c80c8b2f0413'
      }
    ]
  },
  {
    id: 2,
    country: [
      {
        id: '5a60626f1d41c80c8d3f8a83'
      },
      {
        id: '5a60626f1d41c80c8d3f8a84'
      }
    ]
  }
];

const ids = arr.reduce(
  (acc, {country}) => [
    ...acc,
    ...country.map(({id}) => ({
      id
    }))
  ],
  []
);
console.log(ids);

edited Jan 26, 2018 at 5:06

answered Jan 25, 2018 at 4:22

Talgat Saribayev

1,93813 silver badges19 bronze badges

1 Comment

Jane Emelia Over a year ago

what if country's array have other property? I just want to have the id.

Slai · Accepted Answer · 2019-05-02 07:41:48Z

0

For JSON string data, it can be done during parsing too :

var ids = [], json = '[{"id":1,"country":[{"id":"5a60626f1d41c80c8d3f8a85"},{"id":"5a6062661d41c80c8b2f0413"}]},{"id":2,"country":[{"id":"5a60626f1d41c80c8d3f8a83"},{"id":"5a60626f1d41c80c8d3f8a84"}]}]';

JSON.parse(json, (k, v) => v.big && ids.push(v));

console.log( ids );

answered May 2, 2019 at 7:41

Slai

23k5 gold badges49 silver badges55 bronze badges

Comments

rubyprince · Accepted Answer · 2024-04-23 03:57:30Z

-1

I am not sure why noone mentioned flat() (probably for large arrays, it might be less performant)

const data=[{id:1,country:[{id:"5a60626f1d41c80c8d3f8a85"},{id:"5a6062661d41c80c8b2f0413"}]},{id:2,country:[{id:"5a60626f1d41c80c8d3f8a83"},{id:"5a60626f1d41c80c8d3f8a84"}]}];

const transformed = (data || []).map(o=>{
  return o.country.map(o2=>({id: o2.id}))
}).flat()

console.log(transformed)

edited Apr 23, 2024 at 3:57

answered Dec 24, 2020 at 21:22

rubyprince

17.9k12 gold badges69 silver badges107 bronze badges

Collectives™ on Stack Overflow

How to flatten nested array of object using es6

6 Answers 6

Latest edit

Old answer

3 Comments

Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Latest edit

Old answer

3 Comments

Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related