How to extract various arrays of identical objects from a larger array in JavaScript

Question

How to extract various arrays of identical objects from a larger array in JavaScript

I am working with an array containing objects of this structure:

{id: 543, firstName: 'Ted', lastName: 'Foo', age: 32}

My goal is to filter out objects in the array that have the same values for both the firstName and age properties. The desired outcome is having multiple arrays where elements share the same values for age AND firstName. For example:

[{id: 543, firstName: 'Ted', lastName: 'Foo', age: 32},
{id: 123, firstName: 'Ted', lastName: 'Bar', age: 32},
{id: 432, firstName: 'Ted', lastName: 'Baz', age: 32}]

[{id: 989, firstName: 'George', lastName: 'Smith', age: 67},
{id: 876, firstName: 'George', lastName: 'Miller', age: 67},
{id: 334, firstName: 'George', lastName: 'Stone', age: 67}]

How would you approach this problem elegantly? (ES6 solutions are welcome)

javascript arrays algorithm

Answer 1

Answer №1

To get an array of arrays, you can utilize the reduce() and Object.values() methods.

const data = [
  {id: 543, firstName: 'Ted', lastName: 'Foo', age: 32},
  {id: 123, firstName: 'Ted', lastName: 'Bar', age: 32},
  {id: 432, firstName: 'Ted', lastName: 'Baz', age: 32},
  {id: 989, firstName: 'George', lastName: 'Smith', age: 67},
  {id: 876, firstName: 'George', lastName: 'Miller', age: 67},
  {id: 334, firstName: 'George', lastName: 'Stone', age: 67}
]

const result = Object.values(data.reduce(function(r, e) {
  const key = `${e.firstName}|${e.age}`;
  if(!r[key]) r[key] = [e];
  else r[key].push(e)
  return r;
}, {}))

console.log(result)

Answer 2

To get an array of arrays, you can utilize the reduce() and Object.values() methods.

const data = [
  {id: 543, firstName: 'Ted', lastName: 'Foo', age: 32},
  {id: 123, firstName: 'Ted', lastName: 'Bar', age: 32},
  {id: 432, firstName: 'Ted', lastName: 'Baz', age: 32},
  {id: 989, firstName: 'George', lastName: 'Smith', age: 67},
  {id: 876, firstName: 'George', lastName: 'Miller', age: 67},
  {id: 334, firstName: 'George', lastName: 'Stone', age: 67}
]

const result = Object.values(data.reduce(function(r, e) {
  const key = `${e.firstName}|${e.age}`;
  if(!r[key]) r[key] = [e];
  else r[key].push(e)
  return r;
}, {}))

console.log(result)

Answer 3

Answer №2

To organize them, I would group the elements by their attributes using nested objects. (Instead of concatenating keys for a flat object, I prefer to maintain separate entities.)

Once grouped, I would then consolidate them into a single array.

var information = [
  {id: 543, firstName: 'Ted', lastName: 'Foo', age: 32},
  {id: 123, firstName: 'Ted', lastName: 'Bar', age: 32},
  {id: 432, firstName: 'Ted', lastName: 'Baz', age: 32},
  {id: 989, firstName: 'George', lastName: 'Smith', age: 67},
  {id: 876, firstName: 'George', lastName: 'Miller', age: 67},
  {id: 334, firstName: 'George', lastName: 'Stone', age: 67}
]

function unify(obj, flat) {
   return Object.keys(obj).reduce((arr, key) => arr.concat(!Array.isArray(obj[key]) ? unify(obj[key]): [obj[key]]), [])
}

function categorizeBy(keys, arr) {
   return arr.reduce(function(grouped, item) {
        let node, value;
        for (var i = 0; i < keys.length; i++) {
            value = item[keys[i]]
            if (i == keys.length - 1) node[value] = node[value] || []
            else node = node && (node[value] = node[value] || {}) || (grouped[value] = grouped[value] || {})
        }

        node[value].push(item);
        return grouped;
   }, {})
}

console.log(unify(categorizeBy(["firstName", "age"], information)))

Answer 4

To organize them, I would group the elements by their attributes using nested objects. (Instead of concatenating keys for a flat object, I prefer to maintain separate entities.)

Once grouped, I would then consolidate them into a single array.

var information = [
  {id: 543, firstName: 'Ted', lastName: 'Foo', age: 32},
  {id: 123, firstName: 'Ted', lastName: 'Bar', age: 32},
  {id: 432, firstName: 'Ted', lastName: 'Baz', age: 32},
  {id: 989, firstName: 'George', lastName: 'Smith', age: 67},
  {id: 876, firstName: 'George', lastName: 'Miller', age: 67},
  {id: 334, firstName: 'George', lastName: 'Stone', age: 67}
]

function unify(obj, flat) {
   return Object.keys(obj).reduce((arr, key) => arr.concat(!Array.isArray(obj[key]) ? unify(obj[key]): [obj[key]]), [])
}

function categorizeBy(keys, arr) {
   return arr.reduce(function(grouped, item) {
        let node, value;
        for (var i = 0; i < keys.length; i++) {
            value = item[keys[i]]
            if (i == keys.length - 1) node[value] = node[value] || []
            else node = node && (node[value] = node[value] || {}) || (grouped[value] = grouped[value] || {})
        }

        node[value].push(item);
        return grouped;
   }, {})
}

console.log(unify(categorizeBy(["firstName", "age"], information)))

How to extract various arrays of identical objects from a larger array in JavaScript

Answer №1

Answer №2

Similar questions

What could be the reason behind Cesium viewer's failure to show a model after I upload it?

Discovering duplicate values in an existing array and storing them in a new array in AngularJS can be achieved by iterating through the

Choose the span element within every other td that is not enclosed by an anchor tag

Retrieve the quantity information from a JSON object

What is the best way to protect old documents when selecting new files in a multi-file uploader?

Searching for multiple values using ng-model in AngularJS is a powerful feature that allows

Why is my "npm install" pulling in unnecessary libraries that I didn't even mention?

Change the color of the background in the Material UI Snackbar

Transition not influencing the scale property when activating a class

Executing a get request in Backbone without using the Option parameter by implementing the beforeSend method

Tips for updating the content of a div with the click of another div

A step-by-step guide on how to use ajax/jquery to access an external webpage without relying on iframe

How to encase HTML content within a scope variable without relying on ng-bind-html

Utilizing a library across various files in Node.js

Tracing a path with a snapping motion using my thumb

Utilizing useEffect in the header component of ReactJS/Next.js: A Comprehensive Guide

Tips for developing a versatile code for passport.authenticate

Angular directive for automatically selecting a <select> value when there is only one option available in ngOptions

Working with promises and Async/Await in Express/node can sometimes feel ineffective

Examining Angular Modules using Jasmine Unit Tests