how to group by an array in JavaScript / Jquery

Question

I have an array as below

array1 = [{"month":"January","location":"CENTRAL","percentage":94},
{"month":"February","location":"CENTRAL","percentage":97},
{"month":"March","location":"CENTRAL","percentage":93},
{"month":"January","location":"NORTH","percentage":95},
{"month":"February","location":"NORTH","percentage":91},
{"month":"March","location":"NORTH","percentage":98}];

I want to format my array to look as below

array2= [{
    location: "CENTRAL",
    January: 94,
    February: 97,
    March: 93},
    {
    location: "NORTH",
    January: 95,
    February: 91,
    March: 98}];

I tried to use group by function as below

function groupBy(list, keyGetter) {
    const map = new Map();
    list.forEach((item) => {
        const key = keyGetter(item);
        if (!map.has(key)) {
            map.set(key, [item]);
        } else {
            map.get(key).push(item);
        }
    });
    return map;
}

const grouped = groupBy(array1, arr => arr.location);
console.log(grouped);

but I am not getting the same format. Any suggestions please what I am missing in my idea ? Thank you very much.

Your function is too basic for what you're expecting I guess. You don't show how you expect to aggregate the month values. You also return the data mapped by location but you're expecting a simple array. — ChiefTwoPencils
– ChiefTwoPencils, Commented Feb 24, 2019 at 21:54

trincot · Accepted Answer · 2019-02-24 22:04:39Z

You can indeed use a map keyed by location, but then with plain objects as values. The problem in your code is that you push items into an array, and don't turn the month values into properties of a singular object (per location).

So given a map with plain objects, iterate the input and inject the month properties into those plain objects, with corresponding percentage values, and then take the values of that map:

const array1 = [{"month":"January","location":"CENTRAL","percentage":94},{"month":"February","location":"CENTRAL","percentage":97},{"month":"March","location":"CENTRAL","percentage":93},{"month":"January","location":"NORTH","percentage":95},{"month":"February","location":"NORTH","percentage":91},{"month":"March","location":"NORTH","percentage":98}];

const map = new Map(array1.map(({location}) => [location, { location }]));
array1.forEach(o => map.get(o.location)[o.month] = o.percentage);
const result = [...map.values()];

console.log(result);

Nina Scholz · Accepted Answer · 2019-02-24 22:19:53Z

You could use a dynamic approach by handing over the group key, the keys for key and value for collecting.

Then add all key/value pairs to the object and later return the values of the map.

function groupBy(list, group, key, value) {
    return Array.from(list
        .reduce((map, object) => map.set(object[group], Object.assign(
            map.get(object[group]) || { [group]: object[group] },
            { [object[key]]: object[value] }
        )), new Map)
        .values()
    );
}

var array = [{ month: "January", location: "CENTRAL", percentage: 94 }, { month: "February", location: "CENTRAL", percentage: 97 }, { month: "March", location: "CENTRAL", percentage: 93 }, { month: "January", location: "NORTH", percentage: 95 }, { month: "February", location: "NORTH", percentage: 91 }, { month: "March", location: "NORTH", percentage: 98 }],
    result = groupBy(array, 'location', 'month', 'percentage');

console.log(result);

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

Ele · Accepted Answer · 2019-02-24 22:25:12Z

An alternative is using the function reduce to group by location and the function Object.values to extract the grouped objects.

let array1 = [{"month":"January","location":"CENTRAL","percentage":94},{"month":"February","location":"CENTRAL","percentage":97},{"month":"March","location":"CENTRAL","percentage":93},{"month":"January","location":"NORTH","percentage":95},{"month":"February","location":"NORTH","percentage":91},{"month":"March","location":"NORTH","percentage":98}],
    groupBy = (array, keygetter) => {
      return Object.values(array1.reduce((a, {month, percentage, ...rest}) => {
        let key = keygetter(rest);
        (a[key] || (a[key] = {location: key}))[month] = percentage;
        return a;
      }, Object.create(null)));
    },
    result = groupBy(array1, (o) => o.location);
    
console.log(result);

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

guest271314 · Accepted Answer · 2019-02-24 22:10:00Z

One approach is to use .filter() and .map()

var array1 = [{"month":"January","location":"CENTRAL","percentage":94},
{"month":"February","location":"CENTRAL","percentage":97},
{"month":"March","location":"CENTRAL","percentage":93},
{"month":"January","location":"NORTH","percentage":95},
{"month":"February","location":"NORTH","percentage":91},
{"month":"March","location":"NORTH","percentage":98}];

const groupBy = (arr, prop, propName1, propName2, propName3) => 
  Object.assign({[prop]:propName1}
  , ...arr.filter(({[prop]:p}) => p === propName1)
    .map(({[propName2]:m, [propName3]:p}) => ({[m]: p}))
  );

const locations = ["CENTRAL", "NORTH"];

let res = locations.map(prop => groupBy(array1, "location", prop, "month", "percentage"));

console.log(res);

Jack Bashford · Accepted Answer · 2019-02-24 21:55:54Z

0

The problem is, you can't just rearrange the properties in an object. According to the ECMAScript specifications:

An ECMAScript object is an unordered collection of properties

You can rearrange the properties using your function, but the order will not be guaranteed in the final object.

answered Feb 24, 2019 at 21:55

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

4 Comments

ChiefTwoPencils Over a year ago

I know it looks like that's what they're doing but I doubt that's what they're seeking.

Jack Bashford Over a year ago

Sorry @ChiefTwoPencils, but yes, it's the only difference between their two arrays - the order of the properties in each object.

ChiefTwoPencils Over a year ago

The object's props are actually different. For example, they have explicit month props in the second rather than a single month prop in the first.

Jack Bashford Over a year ago

Whoops, missed that.

EugenSunic · Accepted Answer · 2019-12-11 22:20:15Z

Here is another example using reduce, pass the callback function and specify the key in it

array1 = [{
    "month": "January",
    "location": "CENTRAL",
    "percentage": 94
  },
  {
    "month": "February",
    "location": "CENTRAL",
    "percentage": 97
  },
  {
    "month": "March",
    "location": "CENTRAL",
    "percentage": 93
  },
  {
    "month": "January",
    "location": "NORTH",
    "percentage": 95
  },
  {
    "month": "February",
    "location": "NORTH",
    "percentage": 91
  },
  {
    "month": "March",
    "location": "NORTH",
    "percentage": 98
  }
];


function groupBy(list, callback) {
  return list.reduce((acc, x) => {
    const key = callback(x);
    if (!acc[key]) {
      return {
        ...acc,
        [key]: [x]
      }
    }
    return {
      ...acc,
      [key]: [...acc[key], x]
    }

  }, {})
}

// callback function
function locationName(obj) {
  return obj.location
}


console.log('group by location name:', groupBy(array1, locationName));

Collectives™ on Stack Overflow

how to group by an array in JavaScript / Jquery

6 Answers 6

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related