Collapse an array of objects on a property value in javascript

Question

How do I aggregate an array of objects on an object property in order to turn:

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

...into:

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

...with javascript?

I feel like there should be a fairly straightforward way to do this with lodash or Array.reduce, but I cant for the life of me work out how to do it.

Nina Scholz · Accepted Answer · 2016-04-13 10:06:18Z

3

You could use a temporary object for referencing the groups and return an array with the result in a single loop.

var array = [{ 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'] }],
    result = [];

array.forEach(function (a) {
    if (!this[a.key]) {
        this[a.key] = { key: a.key, value: [] };
        result.push(this[a.key]);
    }
    this[a.key].value = this[a.key].value.concat(a.value);
    this[a.key].value.sort();
}, {});

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

edited Apr 13, 2016 at 10:06

answered Apr 13, 2016 at 9:59

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ryeballar Over a year ago

this should be referring to the window context.

Nina Scholz Over a year ago

@ryeballar, no, its thisArgs of Array#forEach. the content is an empty object {}.

ryeballar Over a year ago

Oh, sorry about that, didn't notice.

Matthew Herbst · Accepted Answer · 2016-04-13 10:03:17Z

0

You could pretty easily write this yourself without any 3rd-party stuff:

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

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

  for(var 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(function(key){
  return {
    key: key,
    value: reducedMap[key].sort()
  };
});

answered Apr 13, 2016 at 10:03

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Comments

gurvinder372 · Accepted Answer · 2016-04-13 10:05:27Z

You need to group first in an map and then produce the output you want

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

Now product the compressed output

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

DEMO

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(val) {
  var key = val.key;
  var value = val.value;
  output[key] = output[key] || [];
  output[key] = output[key].concat(val.value);
});

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

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

Chris · Accepted Answer · 2016-04-13 13:24:46Z

You can use a combination of groupBy, map, and reduce to create the desired result:

  var result = 
      _(input)
          .groupBy('key')
          .map(function(d, key) {
              return {
                  key: key, 
                  value: _.reduce(d, function(a, dd) {
                      return a.concat(dd.value);
                  }, []).sort(),
              };
          })
          .value();

Fiddle here: https://jsfiddle.net/dw1zzfqt/1/

ES2015 Version

var result = 
    _(input)
        .groupBy('key')
        .map((d, key) => ({
            key, 
            value: _.reduce(d, (a, dd) => a.concat(dd.value), []).sort()
        }))
        .value();

Fiddle here: https://jsfiddle.net/dw1zzfqt/2/

Peter · Accepted Answer · 2021-02-11 13:31:35Z

0

var array = [{ 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'] }],
    result = [];

array.forEach(function (a) {
    if (!this[a.key]) {
        this[a.key] = { key: a.key, value: [] };
        result.push(this[a.key]);
    }
    this[a.key].value = this[a.key].value.concat(a.value);
    this[a.key].value.sort();
}, {});

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

answered Feb 11, 2021 at 13:31

Peter

1

1 Comment

Mark Rotteveel Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Vivick · Accepted Answer · 2024-02-28 11:23:44Z

Using lodash, as indicated by your question's tags:

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>

We use _.chain to create a chain of transformations, and _.value to unwrap that chain into the computed result.

Fergie · Accepted Answer · 2024-02-29 07:52:17Z

-1

const dedupe = a => [...new Set(a)].sort()

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

dedupe(arr.map(item => item.key)) // get unique, sorted array of 'key's
  .map(key =>
    arr
      .filter(item => item.key == key) // process each key in turn
      .reduce((a, c) => ({
        key,
        value: dedupe([...c.value, ...a.value]) // aggregate and sort the 'value's for each 'key'
      }))
  )

edited Feb 29, 2024 at 7:52

answered Feb 28, 2024 at 11:00

Fergie

6,2858 gold badges41 silver badges46 bronze badges

Collectives™ on Stack Overflow

Collapse an array of objects on a property value in javascript

7 Answers 7

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related