Combine objects within an array based on a specific property value in JavaScript

Question

Combine objects within an array based on a specific property value in JavaScript

Is there an easy way to aggregate an array of objects based on a specific property in JavaScript?

[ { key: 'black', value: [ '2', '3', '9' ] },
  { key: 'black', value: [ '1' ] },
  { key: 'gold', value: [ '2', '3' ] },
  { key: 'gold', value: [ '1' ] },
  { key: 'red', value: [ '9' ] },
  { key: 'white', value: [ '2', '3' ] },
  { key: 'white', value: [ '1' ] } ]

I want to transform the above array into:

[ { key: 'black', value: [ '1', '2', '3', '9' ] },
  { key: 'gold', value: [ '1', '2', '3' ] },
  { key: 'red', value: [ '9' ] },
  { key: 'white', value: [ '1', '2', '3' ] } ]

If anyone knows a simple solution using lodash or Array.reduce, I would greatly appreciate the help!

javascript arrays group-by lodash reduce

Answer 1

Answer №1

To streamline the process, consider using a temporary object to reference the groups and generate an array containing the outcome within a single iteration.

const data = [{ key: 'black', value: ['2', '3', '9'] }, { key: 'black', value: ['1'] }, { key: 'gold', value: ['2', '3'] }, { key: 'gold', value: ['1'] }, { key: 'red', value: ['9'] }, { key: 'white', value: ['2', '3'] }, { key: 'white', value: ['1'] }],
    resultArray = [];

data.forEach(function (item) {
    if (!this[item.key]) {
        this[item.key] = { key: item.key, value: [] };
        resultArray.push(this[item.key]);
    }
    this[item.key].value = this[item.key].value.concat(item.value);
    this[item.key].value.sort();
}, {});

document.write('<pre>' + JSON.stringify(resultArray, 0, 4) + '</pre>');

Answer 2

To streamline the process, consider using a temporary object to reference the groups and generate an array containing the outcome within a single iteration.

const data = [{ key: 'black', value: ['2', '3', '9'] }, { key: 'black', value: ['1'] }, { key: 'gold', value: ['2', '3'] }, { key: 'gold', value: ['1'] }, { key: 'red', value: ['9'] }, { key: 'white', value: ['2', '3'] }, { key: 'white', value: ['1'] }],
    resultArray = [];

data.forEach(function (item) {
    if (!this[item.key]) {
        this[item.key] = { key: item.key, value: [] };
        resultArray.push(this[item.key]);
    }
    this[item.key].value = this[item.key].value.concat(item.value);
    this[item.key].value.sort();
}, {});

document.write('<pre>' + JSON.stringify(resultArray, 0, 4) + '</pre>');

Answer 3

Answer №2

If you want to tackle this task on your own without relying on external libraries, here's a straightforward approach:

let input = ...
let reduced = [];
let reducedMap = {};

input.forEach((obj) => {
  if (!reduced.hasOwnProperty(obj.key)) {
    reduced[obj.key] = [];
  }

  for (let i = 0; i < obj.value.length; i++) {
    if (reduced[obj.key].indexOf(obj.value[i]) < 0) {
      reduced[obj.key].push(obj.value[i]);
    }
  }
});

reduced = Object.keys(reducedMap).map((key) => {
  return {
    key: key,
    value: reducedMap[key].sort()
  };
});

Answer 4

If you want to tackle this task on your own without relying on external libraries, here's a straightforward approach:

let input = ...
let reduced = [];
let reducedMap = {};

input.forEach((obj) => {
  if (!reduced.hasOwnProperty(obj.key)) {
    reduced[obj.key] = [];
  }

  for (let i = 0; i < obj.value.length; i++) {
    if (reduced[obj.key].indexOf(obj.value[i]) < 0) {
      reduced[obj.key].push(obj.value[i]);
    }
  }
});

reduced = Object.keys(reducedMap).map((key) => {
  return {
    key: key,
    value: reducedMap[key].sort()
  };
});

Answer 5

Answer №3

To achieve the desired output, you should first group the data in a map and then manipulate it accordingly.

var output = {};
obj.forEach(function(item){
 output[item.key] = output[item.key] || [];
 output[item.key] = output[item.key].concat(item.value);
});

Next, generate the compressed output as follows:

var finalOutput = Object.keys(output).map(function(item){
      return { key: item, value: output[item] };
});

Check out the demo below to see this in action:

var obj = [{
  key: 'black',
  value: ['2', '3', '9']
}, {
  key: 'black',
  value: ['1']
}, {
  key: 'gold',
  value: ['2', '3']
}, {
  key: 'gold',
  value: ['1']
}, {
  key: 'red',
  value: ['9']
}, {
  key: 'white',
  value: ['2', '3']
}, {
  key: 'white',
  value: ['1']
}];

var output = {};
obj.forEach(function(item) {
  var key = item.key;
  var value = item.value;
  output[key] = output[key] || [];
  output[key] = output[key].concat(item.value);
});

var finalOutput = Object.keys(output).map(function(item) {
  return {
    key: item,
    value: output[item]
  };
});

document.body.innerHTML += JSON.stringify(finalOutput,0,4);

Answer 6

To achieve the desired output, you should first group the data in a map and then manipulate it accordingly.

var output = {};
obj.forEach(function(item){
 output[item.key] = output[item.key] || [];
 output[item.key] = output[item.key].concat(item.value);
});

Next, generate the compressed output as follows:

var finalOutput = Object.keys(output).map(function(item){
      return { key: item, value: output[item] };
});

Check out the demo below to see this in action:

var obj = [{
  key: 'black',
  value: ['2', '3', '9']
}, {
  key: 'black',
  value: ['1']
}, {
  key: 'gold',
  value: ['2', '3']
}, {
  key: 'gold',
  value: ['1']
}, {
  key: 'red',
  value: ['9']
}, {
  key: 'white',
  value: ['2', '3']
}, {
  key: 'white',
  value: ['1']
}];

var output = {};
obj.forEach(function(item) {
  var key = item.key;
  var value = item.value;
  output[key] = output[key] || [];
  output[key] = output[key].concat(item.value);
});

var finalOutput = Object.keys(output).map(function(item) {
  return {
    key: item,
    value: output[item]
  };
});

document.body.innerHTML += JSON.stringify(finalOutput,0,4);

Answer 7

Answer №4

To achieve the desired outcome, you can utilize a mixture of groupBy, map, and reduce:

var solution = 
    _(data)
        .groupBy('category')
        .map(function(items, category) {
            return {
                category: category, 
                values: _.reduce(items, function(acc, item) {
                    return acc.concat(item.value);
                }, []).sort(),
            };
        })
        .value();

Check out this working example on: https://jsfiddle.net/abc123xyz/1/

Modern ES2015 Syntax Version

var solution = 
    _(data)
        .groupBy('category')
        .map((items, category) => ({
            category, 
            values: _.reduce(items, (acc, item) => acc.concat(item.value), []).sort()
        }))
        .value();

Explore the implementation here: https://jsfiddle.net/abc123xyz/2/

Answer 8

To achieve the desired outcome, you can utilize a mixture of groupBy, map, and reduce:

var solution = 
    _(data)
        .groupBy('category')
        .map(function(items, category) {
            return {
                category: category, 
                values: _.reduce(items, function(acc, item) {
                    return acc.concat(item.value);
                }, []).sort(),
            };
        })
        .value();

Check out this working example on: https://jsfiddle.net/abc123xyz/1/

Modern ES2015 Syntax Version

var solution = 
    _(data)
        .groupBy('category')
        .map((items, category) => ({
            category, 
            values: _.reduce(items, (acc, item) => acc.concat(item.value), []).sort()
        }))
        .value();

Explore the implementation here: https://jsfiddle.net/abc123xyz/2/

Answer 9

Answer №5

const items = [{ key: 'black', value: ['2', '3', '9'] }, { key: 'black', value: ['1'] }, { key: 'gold', value: ['2', '3'] }, { key: 'gold', value: ['1'] }, { key: 'red', value: ['9'] }, { key: 'white', value: ['2', '3'] }, { key: 'white', value: ['1'] }],
    resultArray = [];

items.forEach(function(item) {
    if (!this[item.key]) {
        this[item.key] = { key: item.key, value: [] };
        resultArray.push(this[item.key]);
    }
    this[item.key].value = this[item.key].value.concat(item.value);
    this[item.key].value.sort();
}, {});

document.write('<pre>' + JSON.stringify(resultArray, 0, 4) + '</pre>');

Answer 10

const items = [{ key: 'black', value: ['2', '3', '9'] }, { key: 'black', value: ['1'] }, { key: 'gold', value: ['2', '3'] }, { key: 'gold', value: ['1'] }, { key: 'red', value: ['9'] }, { key: 'white', value: ['2', '3'] }, { key: 'white', value: ['1'] }],
    resultArray = [];

items.forEach(function(item) {
    if (!this[item.key]) {
        this[item.key] = { key: item.key, value: [] };
        resultArray.push(this[item.key]);
    }
    this[item.key].value = this[item.key].value.concat(item.value);
    this[item.key].value.sort();
}, {});

document.write('<pre>' + JSON.stringify(resultArray, 0, 4) + '</pre>');

Answer 11

Answer №6

When it comes to working with lodash, the tags in your question have you covered:

const arr = [ { key: 'black', value: [ '2', '3', '9' ] },
      { key: 'black', value: [ '1' ] },
      { key: 'gold', value: [ '2', '3' ] },
      { key: 'gold', value: [ '1' ] },
      { key: 'red', value: [ '9' ] },
      { key: 'white', value: [ '2', '3' ] },
      { key: 'white', value: [ '1' ] } ];
      
    const newArr = _.chain(arr) // Lodash<number, { key, value }>
        .groupBy("key") // Lodash<key, { key, value }>
        .mapValues(items => {
            return _.chain(items) // Lodash<number, value>
                .reduce((values, item) => [...values, ...item.value], []) // Lodash<number, value>
                .sortBy(_.identity)
                .sortedUniq()
                .value(); // value
        }) // Lodash<key, value>
        .map((value, key) => ({ key, value }))  // Lodash<number, { key, value }>
        .value(); // { key, value }[]
    
    console.log({ arr, newArr });

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The utilization of _.chain facilitates a series of transformations, while _.value is employed to reveal the end result of those transformations.

Answer 12

When it comes to working with lodash, the tags in your question have you covered:

const arr = [ { key: 'black', value: [ '2', '3', '9' ] },
      { key: 'black', value: [ '1' ] },
      { key: 'gold', value: [ '2', '3' ] },
      { key: 'gold', value: [ '1' ] },
      { key: 'red', value: [ '9' ] },
      { key: 'white', value: [ '2', '3' ] },
      { key: 'white', value: [ '1' ] } ];
      
    const newArr = _.chain(arr) // Lodash<number, { key, value }>
        .groupBy("key") // Lodash<key, { key, value }>
        .mapValues(items => {
            return _.chain(items) // Lodash<number, value>
                .reduce((values, item) => [...values, ...item.value], []) // Lodash<number, value>
                .sortBy(_.identity)
                .sortedUniq()
                .value(); // value
        }) // Lodash<key, value>
        .map((value, key) => ({ key, value }))  // Lodash<number, { key, value }>
        .value(); // { key, value }[]
    
    console.log({ arr, newArr });

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The utilization of _.chain facilitates a series of transformations, while _.value is employed to reveal the end result of those transformations.

Answer 13

Answer №7

function removeDuplicates(arr) {
   return [...new Set(arr)].sort();
}

const data = [
  { category: 'black', items: ['2', '3', '9', '1'] },
  { category: 'black', items: ['1'] },
  { category: 'gold', items: ['2', '3'] },
  { category: 'gold', items: ['1'] },
  { category: 'red', items: ['9'] },
  { category: 'white', items: ['3', '2'] },
  { category: 'white', items: ['1'] }
]

removeDuplicates(data.map(item => item.category)) // get unique, sorted array of categories
  .map(category =>
    data
      .filter(item => item.category === category) // process each category in turn
      .reduce((accumulator, current) => ({
        category,
        items: removeDuplicates([...current.items, ...accumulator.items]) // aggregate and sort the items for each category
      }))
  )

Answer 14

function removeDuplicates(arr) {
   return [...new Set(arr)].sort();
}

const data = [
  { category: 'black', items: ['2', '3', '9', '1'] },
  { category: 'black', items: ['1'] },
  { category: 'gold', items: ['2', '3'] },
  { category: 'gold', items: ['1'] },
  { category: 'red', items: ['9'] },
  { category: 'white', items: ['3', '2'] },
  { category: 'white', items: ['1'] }
]

removeDuplicates(data.map(item => item.category)) // get unique, sorted array of categories
  .map(category =>
    data
      .filter(item => item.category === category) // process each category in turn
      .reduce((accumulator, current) => ({
        category,
        items: removeDuplicates([...current.items, ...accumulator.items]) // aggregate and sort the items for each category
      }))
  )

Combine objects within an array based on a specific property value in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

How to Properly Manipulate DOM Elements in an Angular Directive

In PHP, you can use the `echo` statement to output an HTML input

What is the best approach to combine 'v-for' with 'v-if' in my code?

How can you efficiently pass the index as a prop to a child component in React.js when dealing with arrays stored in

Can you explain Node.js and its applications as well as how it is commonly used?

What is the best way to form an array containing associative subarrays from a one-dimensional array?

Node.js server for Cross-Origin Resource Sharing

Maintaining consistent spacing across multiple lines with a flex-box container: A guide

Eliminate the first element from the array without erasing the entire array

componentWillReceiveProps with excessive conditional statements

Error: Unexpected token '<' encountered in Ajax request with status code 200

Show loading icon while resolving routes or changing routes

Accepting POST requests from an external source in AngularJS

Sharing functions as properties with child components

Angular code is malfunctioning and not delivering the expected results

Discovering elements with Selenium

Changing the names of elements in a struct array using Matlab

Encountered an Error in Express.js: Unable to POST /users

Activate Keyboard and Background in the Bootstrap Modal

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out