Get new array from array of objects

Question

I have an array that has another array inside.

[
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

I am trying to get a new array with userId only. For e.g.

[
  { "userId": 1 },
  { "userId": 2 },
  { "userId": 3 }
]

array.map(o => o.userId) works for array of objects and don't know how can i get inside array.

Any help is appreciated

[`Array.prototype.flat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) — Andreas, Feb 04 '19 at 13:59
Possible duplicate of [JavaScript flattening an array of arrays of objects](https://stackoverflow.com/questions/29158723/javascript-flattening-an-array-of-arrays-of-objects) and [Merge/flatten an array of arrays in JavaScript?](https://stackoverflow.com/questions/10865025) and [How to flatten nested array in javascript?](https://stackoverflow.com/questions/27266550) — adiga, Feb 04 '19 at 14:10

score 2 · Answer 1 · answered Feb 04 '19 at 13:58

2

you'll have to flat the array first :

const data = [
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

const result = data.flat().map(({userId}) => ({userId}));
console.log(result);

answered Feb 04 '19 at 13:58

Taki

17,320
4
26
47

1

Literally half way through typing this same answer. This is the easiest way to achieve your outcome. – Feb 04 '19 at 13:59
1

Same answer. Ahhhh!!! – Praveen Kumar Purushothaman Feb 04 '19 at 14:02

score 2 · Answer 2 · answered Feb 04 '19 at 14:10

You can flatten the array using array#concat and then using destructuring and array#map generate the array.

const data = [ [ { "userId": 1, "title": "title 1", }, { "userId": 2, "title": "title 2", } ], [ { "userId": 3, "title": "title 3", } ] ],
      result = [].concat(...data).map(({userId}) => ({userId}));
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 1 · Answer 3 · answered Feb 04 '19 at 14:06

1

Array.prototype.flat is fairly new; in case you can't use it you can use a combination of reduce and map:

const data = [
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

const userIds = data.reduce((_, a) => {
 return _.concat(a.map(({ userId }) => ({ userId })))
}, [])

console.log(userIds)

A benefit about map within the reduce call is that you're only iterating over the array once instead of chaining. This will have better performance over larger arrays than chaining array methods.

^{All assuming your data structure is only one level deep!}

answered Feb 04 '19 at 14:06

chazsolo

7,873
1
20
44

You're iterating once for the enclosing array and then iterating *each* element with `.map` . If anything I expect that this would be marginally slower because it needs to create a function for each inner element iteration. – nicholaswmin Feb 04 '19 at 14:12
@NikKyriakides not that jsperf is the end-all for the subject, but I decided to [run this through and check `flat` vs this method.](https://jsperf.com/array-flat-vs-reduce/1). At least in this case, reduce is _much_ faster. – chazsolo Feb 04 '19 at 14:21
Really? Interesting. Can't check your benchmark now but if you say so. – nicholaswmin Feb 04 '19 at 14:22
Honestly it surprised me, too! – chazsolo Feb 04 '19 at 14:25

score 1 · Answer 4 · answered Feb 04 '19 at 14:07

Another one using Array.reduce, for browsers that don't support Array.flat.

const data = [
  [
    {
      "userId": 1,
      "title": "title 1",
    },
    {
      "userId": 2,
      "title": "title 2",
    }
  ],
  [
    {
      "userId": 3,
      "title": "title 3",
    }
  ]
]

const result = data.reduce((arr, i) => {
  return arr.concat(i.map(({ userId }) => ({ userId })))
}, [])

console.log(result)

score -1 · Answer 5 · answered Feb 04 '19 at 14:01

Just get everything out in a new array :)

let arr = [
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

let newArr = []
arr.forEach(i => i.forEach(o => newArr.push(o)))
console.log(newArr.map(o => o.userId))

Get new array from array of objects

5 Answers5