Most effective method for grouping array elements by multiple criteria in JavaScript using ES6 syntax

Question

Most effective method for grouping array elements by multiple criteria in JavaScript using ES6 syntax

Hello developers, I have a question about how to categorize an array of objects with different values into specific sub-groups based on certain criteria. Each subgroup should contain objects with specific values according to the queried key.

Here is an example array:

const cars = 
  [ { make: 'audi', model: 'r8',      year: '2012' } 
  , { make: 'audi', model: 'rs5',     year: '2013' } 
  , { make: 'ford', model: 'mustang', year: '2012' } 
  , { make: 'ford', model: 'fusion',  year: '2015' } 
  , { make: 'kia',  model: 'optima',  year: '2012' } 
  ]

I want to group by the key make and create a subgroup called 2nd_class for objects where the value in the make key is either kia or ford. The rest should be grouped under 1rst_class.

The expected result would look like this:

const expected = 
  [ '2nd_class': 
    [ { make: 'ford', model: 'mustang', year: '2012' } 
    , { make: 'ford', model: 'fusion',  year: '2015' } 
    , { make: 'kia',  model: 'optima',  year: '2012' } 
    ] 
  , '1rst_class' : 
    [ { make: 'audi', model: 'r8',  year: '2012' } 
    , { make: 'audi', model: 'rs5', year: '2013' } 
    ] 
  ]

I haven't been able to find examples online that address grouping by key and multiple values. Any help would be greatly appreciated!

javascript arrays ecmascript-6 javascript-objects

Answer 1

Answer №1

If you prefer, you have the option to do the following:

const vehicles = [ 
 { make: 'audi', model: 'r8',      year: '2012' }, 
 { make: 'audi', model: 'rs5',     year: '2013' }, 
 { make: 'ford', model: 'mustang', year: '2012' },
 { make: 'ford', model: 'fusion',  year: '2015' },
 { make: 'kia',  model: 'optima',  year: '2012' } 
];

const vehicles_by_class = vehicles.reduce((accumulator,current)=>{
  const classification=(current.make==="audi"?"1st":"2nd")+"_class";
  (accumulator[classification]=accumulator[classification]||[]).push(current);
  return accumulator;}, {} );

console.log(vehicles_by_class);

The line

(accumulator[classification]=accumulator[classification]||[]).push(current);

verifies if the property accumulator[classification] already exists in the object and - if not - initializes it as an empty array before adding the current element to it.

If you want to include multiple brands under the "1st_class" category, you can modify line 2 like this:

const classification=(["audi","mercedes"].indexOf(current.make)>-1?"1st":"2nd")+ "_class";

Answer 2

If you prefer, you have the option to do the following:

const vehicles = [ 
 { make: 'audi', model: 'r8',      year: '2012' }, 
 { make: 'audi', model: 'rs5',     year: '2013' }, 
 { make: 'ford', model: 'mustang', year: '2012' },
 { make: 'ford', model: 'fusion',  year: '2015' },
 { make: 'kia',  model: 'optima',  year: '2012' } 
];

const vehicles_by_class = vehicles.reduce((accumulator,current)=>{
  const classification=(current.make==="audi"?"1st":"2nd")+"_class";
  (accumulator[classification]=accumulator[classification]||[]).push(current);
  return accumulator;}, {} );

console.log(vehicles_by_class);

The line

(accumulator[classification]=accumulator[classification]||[]).push(current);

verifies if the property accumulator[classification] already exists in the object and - if not - initializes it as an empty array before adding the current element to it.

If you want to include multiple brands under the "1st_class" category, you can modify line 2 like this:

const classification=(["audi","mercedes"].indexOf(current.make)>-1?"1st":"2nd")+ "_class";

Answer 3

Answer №2

If you're looking to achieve a similar outcome, consider implementing code like this:

const vehicles = [
  {
    'make': 'toyota',
    'model': 'camry',
    'year': '2019'
  }, {
    'make': 'honda',
    'model': 'accord',
    'year': '2020'
  }, {
    'make': 'chevrolet',
    'model': 'malibu',
    'year': '2017'
  }, {
    'make': 'jeep',
    'model': 'wrangler',
    'year': '2018'
  },
];

// List of used makes
const usedMakes = [];
// Result object
const formattedResult = {
  'high_end_cars': [],
  'budget_cars': []
};

// Loop through the vehicle array
vehicles.forEach(vehicle => {
  // Check if we have encountered this make before 
  if (usedMakes.indexOf(vehicle.make) === -1) {
    // Retrieve all vehicles with the same make as the current vehicle
    const filteredVehicles = vehicles.filter(v => v.make === vehicle.make);
    
    if (['chevrolet', 'honda'].includes(vehicle.make)) {
      // Add to budget cars 
      formattedResult['budget_cars'].push(...filteredVehicles)
    } else {
      // Add to high-end cars
      formattedResult['high_end_cars'].push(...filteredVehicles)
    }
    
    // Store the used make to avoid duplication
    usedMakes.push(vehicle.make);
  }
});

console.log(formattedResult)

The process of iterating, checking for unused values, processing accordingly, and storing to prevent reuse is a fundamental programming algorithm.

Answer 4

If you're looking to achieve a similar outcome, consider implementing code like this:

const vehicles = [
  {
    'make': 'toyota',
    'model': 'camry',
    'year': '2019'
  }, {
    'make': 'honda',
    'model': 'accord',
    'year': '2020'
  }, {
    'make': 'chevrolet',
    'model': 'malibu',
    'year': '2017'
  }, {
    'make': 'jeep',
    'model': 'wrangler',
    'year': '2018'
  },
];

// List of used makes
const usedMakes = [];
// Result object
const formattedResult = {
  'high_end_cars': [],
  'budget_cars': []
};

// Loop through the vehicle array
vehicles.forEach(vehicle => {
  // Check if we have encountered this make before 
  if (usedMakes.indexOf(vehicle.make) === -1) {
    // Retrieve all vehicles with the same make as the current vehicle
    const filteredVehicles = vehicles.filter(v => v.make === vehicle.make);
    
    if (['chevrolet', 'honda'].includes(vehicle.make)) {
      // Add to budget cars 
      formattedResult['budget_cars'].push(...filteredVehicles)
    } else {
      // Add to high-end cars
      formattedResult['high_end_cars'].push(...filteredVehicles)
    }
    
    // Store the used make to avoid duplication
    usedMakes.push(vehicle.make);
  }
});

console.log(formattedResult)

The process of iterating, checking for unused values, processing accordingly, and storing to prevent reuse is a fundamental programming algorithm.

Answer 5

Answer №3

Here is a way to achieve this:

const cars = 
  [ { make: 'audi', model: 'r8',      year: '2012' } 
  , { make: 'audi', model: 'rs5',     year: '2013' } 
  , { make: 'ford', model: 'mustang', year: '2012' } 
  , { make: 'ford', model: 'fusion',  year: '2015' } 
  , { make: 'kia',  model: 'optima',  year: '2012' } 
  ] 

const Class2 = [ 'ford', 'kia' ]

const expected = cars.reduce( (r,c) =>
  {
  let cls = Class2.includes(c.make) ? '2nd_class':'1rst_class'
  r[cls].push({...c})
  return r
  } , {'2nd_class':[],'1rst_class':[] }  ) 

console.log( expected )

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

Answer 6

Here is a way to achieve this:

const cars = 
  [ { make: 'audi', model: 'r8',      year: '2012' } 
  , { make: 'audi', model: 'rs5',     year: '2013' } 
  , { make: 'ford', model: 'mustang', year: '2012' } 
  , { make: 'ford', model: 'fusion',  year: '2015' } 
  , { make: 'kia',  model: 'optima',  year: '2012' } 
  ] 

const Class2 = [ 'ford', 'kia' ]

const expected = cars.reduce( (r,c) =>
  {
  let cls = Class2.includes(c.make) ? '2nd_class':'1rst_class'
  r[cls].push({...c})
  return r
  } , {'2nd_class':[],'1rst_class':[] }  ) 

console.log( expected )

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

Answer 7

Answer №4

Instead of crafting a one-time solution tailored to your specific scenario, I took the initiative to develop a versatile grouping function. This particular type of grouping goes beyond the conventional approach utilities use to group items, requiring more detailed input.

Introducing the function:

groupBy(arr, propToGroup, mapping)

This function expects an array of objects to be grouped, the property within those objects to analyze for grouping, and a mapping object that specifies which values for that property should belong to each group.

Below is a runnable version you can test in this snippet:

function groupBy(arr, propToGroup, mapping, defaultMapping) {
    let output = new Map();
    for (let item of arr) {
        // get value of our property of interest
        let val = item[propToGroup];
        if (val === undefined) {
            if (defaultMapping) {
                val = defaultMapping;
            } else {
                throw new Error(`No value for property .${propToGroup} and no defaultMapping`);
            }
        }
        let classification = mapping.get(val);
        if (!classification) {
            if (!defaultMapping) {
                throw new Error(`Property value ${val} is not present in mapping and no defaultMapping`);
            }
            classification = defaultMapping;
        }
        let classificationArray = output.get(classification);
        // if classification not found yet, then initialize as empty array
        if (!classificationArray) {
            classificationArray = [];
            output.set(classification, classificationArray);
        }
        classificationArray.push(item);
    }
    // convert to output format
    let result = [];
    for (let [key, val] of output) {
        result.push({
            [key]: val
        });
    }
    return result;
}

const cars = [
    { make: 'audi', model: 'r8', year: '2012' },
    { make: 'audi', model: 'rs5', year: '2013' },
    { make: 'ford', model: 'mustang', year: '2012' },
    { make: 'ford', model: 'fusion', year: '2015' },
    { make: 'kia', model: 'optima', year: '2012' },
    { make: 'vw', model: 'bug', year: '1960' },
];

const mapping = new Map([
    ['audi', '1rst_class'],
    ['ford', '2nd_class'],
    ['kia', '2nd_class']
]);

let result = groupBy(cars, "make", mapping, "other");
console.log(result);

The aim is to have the flexibility to utilize this groupBy() function in diverse scenarios. If a property value isn't found in the mapping but a defaultMapping is provided, it will be sorted into the defaultMapping category. Without a defaultMapping, it will raise an exception if not in the mapping.

Note that implementing a defaultMapping increases the code length, but it helps handle unexpected data or situations where you want a "catchall" group to hold everything not explicitly defined in the mapping. While unnecessary for your current issue, it enhances the general usability of the function across various contexts.

Explanation of Function:

Create a Map object internally to track encountered groups, with group names as keys and arrays of objects within each group as corresponding values.
Iterate through the array of objects.
Retrieve the property value of interest from the object.
If the property doesn't exist, attempt to use the default mapping.
If the property exists, find its classification in the mapping.
If no classification is found, try using the defaultMapping.
Check for the classification in our temporary output Map.
If not found, create an empty array for this classification.
Add the item to the classification array.
Upon finishing iteration, convert the internal Map object to the desired array structure and return it.

Answer 8

Instead of crafting a one-time solution tailored to your specific scenario, I took the initiative to develop a versatile grouping function. This particular type of grouping goes beyond the conventional approach utilities use to group items, requiring more detailed input.

Introducing the function:

groupBy(arr, propToGroup, mapping)

This function expects an array of objects to be grouped, the property within those objects to analyze for grouping, and a mapping object that specifies which values for that property should belong to each group.

Below is a runnable version you can test in this snippet:

function groupBy(arr, propToGroup, mapping, defaultMapping) {
    let output = new Map();
    for (let item of arr) {
        // get value of our property of interest
        let val = item[propToGroup];
        if (val === undefined) {
            if (defaultMapping) {
                val = defaultMapping;
            } else {
                throw new Error(`No value for property .${propToGroup} and no defaultMapping`);
            }
        }
        let classification = mapping.get(val);
        if (!classification) {
            if (!defaultMapping) {
                throw new Error(`Property value ${val} is not present in mapping and no defaultMapping`);
            }
            classification = defaultMapping;
        }
        let classificationArray = output.get(classification);
        // if classification not found yet, then initialize as empty array
        if (!classificationArray) {
            classificationArray = [];
            output.set(classification, classificationArray);
        }
        classificationArray.push(item);
    }
    // convert to output format
    let result = [];
    for (let [key, val] of output) {
        result.push({
            [key]: val
        });
    }
    return result;
}

const cars = [
    { make: 'audi', model: 'r8', year: '2012' },
    { make: 'audi', model: 'rs5', year: '2013' },
    { make: 'ford', model: 'mustang', year: '2012' },
    { make: 'ford', model: 'fusion', year: '2015' },
    { make: 'kia', model: 'optima', year: '2012' },
    { make: 'vw', model: 'bug', year: '1960' },
];

const mapping = new Map([
    ['audi', '1rst_class'],
    ['ford', '2nd_class'],
    ['kia', '2nd_class']
]);

let result = groupBy(cars, "make", mapping, "other");
console.log(result);

The aim is to have the flexibility to utilize this groupBy() function in diverse scenarios. If a property value isn't found in the mapping but a defaultMapping is provided, it will be sorted into the defaultMapping category. Without a defaultMapping, it will raise an exception if not in the mapping.

Note that implementing a defaultMapping increases the code length, but it helps handle unexpected data or situations where you want a "catchall" group to hold everything not explicitly defined in the mapping. While unnecessary for your current issue, it enhances the general usability of the function across various contexts.

Explanation of Function:

Create a Map object internally to track encountered groups, with group names as keys and arrays of objects within each group as corresponding values.
Iterate through the array of objects.
Retrieve the property value of interest from the object.
If the property doesn't exist, attempt to use the default mapping.
If the property exists, find its classification in the mapping.
If no classification is found, try using the defaultMapping.
Check for the classification in our temporary output Map.
If not found, create an empty array for this classification.
Add the item to the classification array.
Upon finishing iteration, convert the internal Map object to the desired array structure and return it.

Most effective method for grouping array elements by multiple criteria in JavaScript using ES6 syntax

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Are there any implementations of RFC-6570 for URI templates using JavaScript?

There is a bug that I have encountered specifically on RN version 0.74

Trouble arises when attempting to use JavaScript, JSP, and JSON in conjunction with

I am attempting to utilize diagram.highlightCollection in gojs to showcase nodes that do not meet a specific condition

Dealing with errors when implementing an Angular 2 route guard that returns an Observable of type boolean can be a

The child component's template content fails to display properly within the parent component hosting it

Using JavaScript to we can transfer the function result to an HTML input field

Utilizing NPM configuration variables across different operating systems (Windows and Linux): A comprehensive guide

Searching for images in the filesystem using a recursive deferred approach

How to showcase an item in Angular 2

Load an XML file from the local server asynchronously on the Chrome web browser

"Exploring the world of JavaScript, Ajax, PHP parser errors, and the process of obtaining post data

Notifying users with a jQuery or Javascript alert when they click the back

Struggling with the functionality of having numerous jQuery UI controls on a single page. Implementing the accordion control in multiple sections

The function addView is not recognized by Framework7

What methods can I use to ensure precision in my raycasting while maneuvering the mouse over various sections of a LineSegment?

The AngularJS error message: TypeError: Unable to access the 'images' property because it is undefined

The echo statement is failing to show any value following the ajax request

Is there a way to display a modal newsletter popup just one time during a user's session?

Error: The method 'editable' is not defined for the jQuery.jEditable object [object Object]