How to get array of unique values from arrays within an array of objects?

Question

I have a given array of objects something like:

var items = [
{item: [{foo: 21, bar: 'a' }, {foo: 5,bar: 'e'},{foo: 167, bar: 'c'}]},
{item: [{foo: 42, bar: 'a' }, {foo: 45,bar: 'd'},{foo: 7, bar: 'c'}]},
{item: [{foo: 99, bar: 'b' }, {foo: 35,bar: 'c'},{foo: 22, bar: 'e'}]},
{item: [{foo: 31, bar: 'e' }, {foo: 22,bar: 'd'},{foo: 12, bar: 'a'}]}
]

and I would like to get a new array that returns the unique values of all the bar values, so it would look something like:

var uniqueBars = ['a','b','c','d','e'];

I have a solution for this by looping through all of the items, but I'm guessing there is a more efficient way to do this using ES6 features.

Is there a way to create the uniqueBars array above using ES6 features?

Andy · Accepted Answer · 2022-04-23 17:40:15Z

Iterate over items with flatMap and for each inner array map over those objects to return each bar value. Shove the resulting sorted flat array into a Set to remove the duplicates and then spread that back out into an array so you can log the deduped values.

const items=[{item:[{foo:21,bar:"a"},{foo:5,bar:"e"},{foo:167,bar:"c"}]},{item:[{foo:42,bar:"a"},{foo:45,bar:"d"},{foo:7,bar:"c"}]},{item:[{foo:99,bar:"b"},{foo:35,bar:"c"},{foo:22,bar:"e"}]},{item:[{foo:31,bar:"e"},{foo:22,bar:"d"},{foo:12,bar:"a"}]}];

// For each `obj.item.map` you'll get a nested array of
// bar values from each object. Use `flatMap` on that array
// to get all the values into one array, and then sort it
const flattened = items.flatMap(obj => {
  return obj.item.map(inner => inner.bar);
}).sort();

// Pass the flattened array into a new Set
// and use spread to work that set into a new array
const deduped = [...new Set(flattened)];

console.log(deduped);

Nina Scholz · Accepted Answer · 2022-04-23 17:44:08Z

1

You could supply a path of keys and get the values for a Set.

const
    getValues = (data, [key, ...keys]) => data.flatMap(o => keys.length
        ? getValues(o[key], keys)
        : o[key]
    ),
    items = [{ item: [{ foo: 21, bar: 'a' }, { foo: 5, bar: 'e' }, { foo: 167, bar: 'c' }] }, { item: [{ foo: 42, bar: 'a' }, { foo: 45, bar: 'd' }, { foo: 7, bar: 'c' }] }, { item: [{ foo: 99, bar: 'b' }, { foo: 35, bar: 'c' }, { foo: 22, bar: 'e' }] }, { item: [{ foo: 31, bar: 'e' }, { foo: 22, bar: 'd' }, { foo: 12, bar: 'a' }] }],
    keys = ['item', 'bar'],
    unique = [...new Set(getValues(items, keys))];

console.log(...unique);

answered Apr 23, 2022 at 17:44

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

EricLavault · Accepted Answer · 2022-04-23 17:54:15Z

1

Here a one-liner (not sure it's the best way though) :

[...new Set(items.map(obj => obj.item.map(o => o.bar)).flat())]

As suggested by @Mulan and @Andy, instead of [].map().flat(), prefer flatMap():

[...new Set(items.flatMap(obj => obj.item.map(o => o.bar)))]

edited Apr 23, 2022 at 17:54

answered Apr 23, 2022 at 17:29

EricLavault

16.6k3 gold badges28 silver badges58 bronze badges

2 Comments

Mulan Over a year ago

.map(...).flat() is the reason .flatMap(...) exists. you will reduce iterations by half

EricLavault Over a year ago

not sure it's the best way though I was editing my post referring to flatMap(), but your comment and @Andy 's answer came first :)

Simpson · Accepted Answer · 2022-04-23 17:33:11Z

0

you could loop through the array of objects and then have a lookups, on the new array

like this

let uniqueBars = []; 
items.foreach = (item) => {
   const itemInNewArray = uniqueBars.find(bar => bar == item.bar);
   if (!itemInNewArray) {
      uniqueBars.push(item.bar)
   }
}

answered Apr 23, 2022 at 17:33

Simpson

1088 bronze badges

Collectives™ on Stack Overflow

How to get array of unique values from arrays within an array of objects?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related