What is the best way to extract an array of distinct values from arrays that are nested within an array of objects

Question

What is the best way to extract an array of distinct values from arrays that are nested within an array of objects

Given an array of objects like the one below:

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'}]}
]

I want to create a new array that contains all unique values of the 'bar' property. So, it should look something like this:

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

Currently, my solution involves looping through all the items, but I believe there might be a more efficient way to achieve this using ES6 features.

Is there a way to generate the uniqueBars array mentioned above using ES6 functionalities?

javascript arrays ecmascript-6

Answer 1

Answer №1

To iterate through the `items` array, utilize the flatMap method. Within each inner array, use the map method to extract the value of each `bar`. After sorting the resulting flattened array, insert it into a Set to eliminate duplicates, then convert it back to an array using the spread operator in order to print the deduplicated 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 will receive a nested array containing
// all bar values from each object. Apply `flatMap` on this array
// to consolidate all values into one, and then proceed to sort it
const flattened = items.flatMap(obj => {
  return obj.item.map(inner => inner.bar);
}).sort();

// Enter the flattened array into a new Set
// and spread that set into a fresh array
const deduped = [...new Set(flattened)];

console.log(deduped);

Answer 2

To iterate through the `items` array, utilize the flatMap method. Within each inner array, use the map method to extract the value of each `bar`. After sorting the resulting flattened array, insert it into a Set to eliminate duplicates, then convert it back to an array using the spread operator in order to print the deduplicated 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 will receive a nested array containing
// all bar values from each object. Apply `flatMap` on this array
// to consolidate all values into one, and then proceed to sort it
const flattened = items.flatMap(obj => {
  return obj.item.map(inner => inner.bar);
}).sort();

// Enter the flattened array into a new Set
// and spread that set into a fresh array
const deduped = [...new Set(flattened)];

console.log(deduped);

Answer 3

Answer №2

To retrieve the values for a Set, you can provide a sequence of keys.

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

Answer 4

To retrieve the values for a Set, you can provide a sequence of keys.

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

Answer 5

Answer №3

Consider this concise one-liner as a potential solution:

[...new Set(elements.map(obj => obj.element.map(o => o.foo)).flat())]

Experts @Alex and @Sara recommend utilizing flatMap() instead of [].map().flat():

[...new Set(elements.flatMap(obj => obj.element.map(o => o.foo)))]

Answer 6

Consider this concise one-liner as a potential solution:

[...new Set(elements.map(obj => obj.element.map(o => o.foo)).flat())]

Experts @Alex and @Sara recommend utilizing flatMap() instead of [].map().flat():

[...new Set(elements.flatMap(obj => obj.element.map(o => o.foo)))]

Answer 7

Answer №4

To iterate through the objects array and create lookups on a new array:

Here's an example of how you can achieve this:

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

Answer 8

To iterate through the objects array and create lookups on a new array:

Here's an example of how you can achieve this:

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

What is the best way to extract an array of distinct values from arrays that are nested within an array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Develop a web application in ASP.NET MVC 4 utilizing bundle configurations

I'm having trouble retrieving data from the server using the AngularJS $http.get() function. What am I doing wrong

The interactive form fields are not functioning as intended due to a dynamic association issue

What steps should I take to fix the error "Unused left side of comma operator with no side effects.ts(2695)" in my React project?

What is the method to transfer a declared object from a .ejs file to my index.js file?

What is the alternative method in JavaScript for locating items instead of using indexOf?

Reorder elements using CSS when they do not share the same immediate parent container

nvim-typescript incorrectly flags non-existent type errors

Parse the text file to extract its data and display that data in a table using Yii2 framework

Tips on running jQuery scripts when a div changes its display style from none to block?

How can I create a bold, three-dimensional line using Three JS LineBasicMaterial?

I'm curious if there is a method to incorporate an array within a where: $or statement using sequelize?

Undefined Laravel Product

Anticipating the execution of a loop and retrieving a value in Node.js

Having issues with $timeout functionality in angular.js

`I am unable to locate the JSON file within Angular 2`

Callback for Vue asynchronous components

The decision between using multiple then statements or consolidating your code into a single then statement depends on the specific requirements

Creating a form submission event through Asp.net code behind

Validating input in Angular UI Bootstrap Datepicker