Grouping a object array on a property while counting the value of another property in javascript

Question

I need to count the occurrence of specific values of a property, grouped by the value of another property. I got working code, but I feel like it can be done more generically.

First off I have two constant arrays. I have a constant with years and a constant with the different possibilities of the values. A third array (myArray) is an array that's formed by a REST call.

const properties = ["a", "b", "c"]
const years = [2015, 2016, 2017, 2018]

let myArray = [
    { date: 2015, prop1: "a" },
    { date: 2015, prop1: "b" },
    { date: 2016, prop1: "b" },
    { date: 2016, prop1: "a" },
    { date: 2016, prop1: "c" },
    { date: 2017, prop1: "b" },
    { date: 2017, prop1: "a" },
    { date: 2017, prop1: "a" },
    { date: 2017, prop1: "b" },
    { date: 2017, prop1: "b" },
    { date: 2018, prop1: "c" },
    { date: 2018, prop1: "b" },

]

Next I have my function. This looks like this.

function doClick() {
    let countArray = [];
    let counta = 0;
    let countb = 0;
    let countc = 0;

    for (let i = 0; i < years.length; i++) {
        let currentYear = years[i]
        for (let x = 0; x < properties.length; x++) {
            let currentProperty = properties[x];
            for (let z = 0; z < myArray.length; z++) {
                if (myArray[z].date === currentYear && myArray[z].prop1 === currentProperty) {
                    switch (currentProperty) {
                        case "a":
                            counta++;
                            break;
                        case "b":
                            countb++;
                            break;
                        case "c":
                            countc++;
                            break;
                    }
                }
            }
        }
        let obj = {
            'year': currentYear,
            'a': counta,
            'b': countb,
            'c': countc
        }
        countArray.push(obj)
        counta = 0;
        countb = 0;
        countc = 0;
    }
    console.log(countArray)
}

This logs an array which can I can use.

0: {year: 2015, a: 1, b: 1, c: 0}
1: {year: 2016, a: 1, b: 1, c: 1}
2: {year: 2017, a: 2, b: 3, c: 0}
3: {year: 2018, a: 0, b: 1, c: 1}

But the constant array properties is in real live much bigger. So I would like to get rid of the hardcoded cases in the switch statement and the lets counta, countb and countc and make it more flexible.

So can anyone help me get this piece of code better?

Thanks!

Answer 1

You could use a generic approach using Array.reduce() and specifying which property you wish to count by.

We create a map, keying on date and then counting by the specified property (in this case prop1):

let myArray = [ { date: 2015, prop1: "a" }, { date: 2015, prop1: "b" }, { date: 2016, prop1: "b" }, { date: 2016, prop1: "a" }, { date: 2016, prop1: "c" }, { date: 2017, prop1: "b" }, { date: 2017, prop1: "a" }, { date: 2017, prop1: "a" }, { date: 2017, prop1: "b" }, { date: 2017, prop1: "b" }, { date: 2018, prop1: "c" }, { date: 2018, prop1: "b" },  ];

const propertyToCount = 'prop1';
const keys = [...new Set(myArray.map(el => el[propertyToCount]))];

const result = Object.values(myArray.reduce((acc, cur) => { 
    acc[cur.date] = acc[cur.date] || { year: cur.date };
    return keys.reduce((acc, key) => { 
        acc[cur.date][key] = acc[cur.date][key] || 0;
        if (cur[propertyToCount] === key) {
            acc[cur.date][key]++;
        }
        return acc;
    }, acc)
}, {}))

console.log('Result:', result);

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

Answer 2

You can use reduce for this, and use the years as keys in a object.

This way, you don't care about what props are come from the API. You just need to check if they exist when you call them.

const properties = ["a", "b", "c"]
const years = [2015, 2016, 2017, 2018]

let myArray = [
    { date: 2015, prop1: "a" },
    { date: 2015, prop1: "b" },
    { date: 2016, prop1: "b" },
    { date: 2016, prop1: "a" },
    { date: 2016, prop1: "c" },
    { date: 2017, prop1: "b" },
    { date: 2017, prop1: "a" },
    { date: 2017, prop1: "a" },
    { date: 2017, prop1: "b" },
    { date: 2017, prop1: "b" },
    { date: 2018, prop1: "c" },
    { date: 2018, prop1: "b" },
]

const ret = myArray.reduce((previousValue, currentValue) => {
  if(!previousValue[currentValue.date]) { previousValue[currentValue.date] = {} }
  if(!previousValue[currentValue.date][currentValue.prop1]) { 
    previousValue[currentValue.date][currentValue.prop1] = 1 
  } else {
    previousValue[currentValue.date][currentValue.prop1]++;
  }
  return previousValue;
}, {})

console.log(ret)

Answer 3

You could group with an object and take prop1 as property accessor for incrementing the count.

const
    properties = ["a", "b", "c"],
    years = [2015, 2016, 2017, 2018],
    data = [{ date: 2015, prop1: "a" }, { date: 2015, prop1: "b" }, { date: 2016, prop1: "b" }, { date: 2016, prop1: "a" }, { date: 2016, prop1: "c" }, { date: 2017, prop1: "b" }, { date: 2017, prop1: "a" }, { date: 2017, prop1: "a" }, { date: 2017, prop1: "b" }, { date: 2017, prop1: "b" }, { date: 2018, prop1: "c" }, { date: 2018, prop1: "b" }],
    empty = Object.fromEntries(properties.map(k => [k, 0])),
    result = Object.values(data.reduce(
        (r, { date, prop1 }) => {
            r[date][prop1]++;
            return r;
        },
        Object.fromEntries(years.map(year => [year, { year, ...empty }])))
    );

console.log(result);

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

Answer 4

You don't need to define 2 const. You can check my below demo:

let myArray = [
    { date: 2015, prop1: "a" },
    { date: 2015, prop1: "b" },
    { date: 2016, prop1: "b" },
    { date: 2016, prop1: "a" },
    { date: 2016, prop1: "c" },
    { date: 2017, prop1: "b" },
    { date: 2017, prop1: "a" },
    { date: 2017, prop1: "a" },
    { date: 2017, prop1: "b" },
    { date: 2017, prop1: "b" },
    { date: 2018, prop1: "c" },
    { date: 2018, prop1: "b" },
];

var result = [];
myArray.forEach(item => {

  var existResult = result.find(e => e.year == item.date);
  if (!existResult) {
    let newItem = {};
    newItem['year'] = item.date;
    newItem['a'] = 0;
    newItem['b'] = 0;
    newItem['c'] = 0;
    newItem[item.prop1]++;
    result.push(newItem);
  } else {
    existResult[item.prop1]++;
  }

});

console.log(result);