How to split entries of an array based on what the property value holds?

Question

I have an array as posted below in code section. What I am trying to achieve is, to process that array in such way that, it should be split into four different arrays based on the value of the property 'value'. So, for all entries in that mainArray with the same value of the property 'value', they should be pushed in a new array.

Is there any method or way in JavaScript that can achieve that task efficiently?

Code:

mainArray = 
[ { key: '2', value: -20 },
{ key: '3', value: 0 },
{ key: '1', value: 10 },
{ key: '5', value: 10 },
{ key: '7', value: 10 },
{ key: '4', value: 40 },
{ key: '6', value: 40 },
{ key: '8', value: 40 } ]

Code 2:

[ { key: '2', value: -20 }] //array1

[{ key: '3', value: 0 }] //array2

[{ key: '1', value: 10 }, //array3
 { key: '5', value: 10 },
 { key: '7', value: 10 }]

[{ key: '4', value: 40 }, //array4
 { key: '6', value: 40 },
 { key: '8', value: 40 }]

So essentially, you want to group by value. Check Caesar Bautista answer [here](https://stackoverflow.com/a/34890276/1598508). — Krzysztof Jabłoński, Apr 03 '18 at 17:09

score 3 · Answer 1 · answered Apr 03 '18 at 17:06

try this,

var a = 
    [ { key: '2', value: -20 },
    { key: '3', value: 0 },
    { key: '1', value: 10 },
    { key: '5', value: 10 },
    { key: '7', value: 10 },
    { key: '4', value: 40 },
    { key: '6', value: 40 },
    { key: '8', value: 40 } ]
    
    var result = Object.values(a.reduce((acc, val)=>{
     if(acc[val.value]){
      acc[val.value].push(val)
     } else{
      acc[val.value] = [val]
     }
     return acc
    },{}))
    
console.log(result)

score 0 · Answer 2 · answered Apr 03 '18 at 17:08

0

You can use lodash's groupBy function:

const grouped = _.groupBy(mainArray, 'value');
const results = [...Object.values(grouped)]

answered Apr 03 '18 at 17:08

Huy Nguyen

2,840
1
14
18

score 0 · Answer 3 · answered Apr 03 '18 at 17:10

If you need different arrays, you can use the filter function.

mainArray = [
    { key: '2', value: -20 },
    { key: '3', value: 0 },
    { key: '1', value: 10 },
    { key: '5', value: 10 },
    { key: '7', value: 10 },
    { key: '4', value: 40 },
    { key: '6', value: 40 },
    { key: '8', value: 40 }
]

const array1 = mainArray.filter(a => a.value === -20)
const array2 = mainArray.filter(a => a.value === 0)
const array3 = mainArray.filter(a => a.value === 10)
const array4 = mainArray.filter(a => a.value === 40)

score 0 · Answer 4 · answered Apr 03 '18 at 17:12

0

Get all the unique value from the main array and then use filter to get the matched array

var mainArray = [{
    key: '2',
    value: -20
  },
  {
    key: '3',
    value: 0
  },
  {
    key: '1',
    value: 10
  },
  {
    key: '5',
    value: 10
  },
  {
    key: '7',
    value: 10
  },
  {
    key: '4',
    value: 40
  },
  {
    key: '6',
    value: 40
  },
  {
    key: '8',
    value: 40
  }
]
var valueArray = [];
//get all the unique value from main array
mainArray.forEach(function(item) {
  if (valueArray.indexOf(item.value) === -1) {
    valueArray.push(item.value)
  }
});
// iterate the value array
valueArray.forEach(function(item) {
  // filter will return a new array with objects having value equal to current item 
  var filteredValue = mainArray.filter(function(x) {
    return x.value === item;
  });

  console.log(filteredValue)

})

answered Apr 03 '18 at 17:12

brk

48,835
10
56
78

would you please clarify, what does the following mean: if (valueArray.indexOf(item.value) === -1) { valueArray.push(item.value) } – Amrmsmb May 01 '18 at 17:36
`indexOf` is used to check if an element is present.If it is present it will return the index else it will return -1 – brk May 01 '18 at 17:39
would you please another time explain this line:return x.value === item; because it seems to me that item is an object and you comparing it to a value (x.value) – Amrmsmb May 01 '18 at 17:47

Nina Scholz · Answer 5 · 2018-04-03T17:50:57.623

With a sorted array, you could check the last object and push an empty array for changed values.

var array = [{ key: '2', value: -20 }, { key: '3', value: 0 }, { key: '1', value: 10 }, { key: '5', value: 10 }, { key: '7', value: 10 }, { key: '4', value: 40 }, { key: '6', value: 40 }, { key: '8', value: 40 }],
    grouped = array.reduce((r, o, i, a) => {
        if (!a[i - 1] || a[i - 1].value !== o.value) {
            r.push([]);
        }
        r[r.length - 1].push(o);
        return r;
    }, [])

console.log(grouped);

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

Or use a Map. It works for an unsorted array as well.

var array = [{ key: '2', value: -20 }, { key: '3', value: 0 }, { key: '1', value: 10 }, { key: '5', value: 10 }, { key: '7', value: 10 }, { key: '4', value: 40 }, { key: '6', value: 40 }, { key: '8', value: 40 }],
    grouped = Array.from(
        array
           .reduce((m, o) => m.set(o.value, [...m.get(o.value) || [], o]), new Map)
           .values()
    );

console.log(grouped);

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

How to split entries of an array based on what the property value holds?

5 Answers5