I want to turn a javascript array to create a new array

Question

I want to display a graph of the total count for groupA and groupB for each month.
The graph library uses chart.js I want to put the sum of the counts for each month in data:[].
I want to turn the array of values to be retrieved from the data to determine groupA and groupB, and put the count for each month into data.

  script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"
  javascript:
    var users = #{raw @user_counts.to_json}
    console.log(users)
    var ct = document.getElementById('ex_chart');
    var ex_chart = new Chart(ct, {
        type: 'horizontalBar',
        data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
          datasets: [
            {
              label: 'groupA',
              data: [],
              backgroundColor: '#C7CED7'
            },
            {
              label: 'groupB',
              data: [],
              backgroundColor: '#0068B4'
            }
          ]
        },
        options: options
    })

Contents of users

[
  {
    activity_type: "groupA"
    count: 10
    created_at: "2021-01-14T13:46:18.000Z"
    id: 1
    year: 2020
    month: "Jan"
    updated_at: "2021-01-14T13:46:18.000Z"
  },
  {
    activity_type: "groupA"
    count: 8
    created_at: "2021-01-14T13:46:18.000Z"
    id: 2
    year: 2020
    month: "Feb"
    updated_at: "2021-01-14T13:46:18.000Z"

  },
  {
    activity_type: "groupB"
    count: 8
    created_at: "2021-01-14T13:46:18.000Z"
    id: 3
    year: 2020
    month: "Feb"
    updated_at: "2021-01-14T13:46:18.000Z"

  }
]

question from:https://stackoverflow.com/questions/65882961/i-want-to-turn-a-javascript-array-to-create-a-new-array

Answer 1

In technical terms, you want to group your user counts by two parameters: 'activityType' and 'month'.

Below is a solution using functional programming. You may modify keys, for example to add 'year' parameter, which actually makes sense.

const users = [
  {
    activity_type: "groupA",
    count: 10,
    year: 2020,
    month: 1
  },
  {
    activity_type: "groupA",
    count: 17,
    year: 2019,
    month: 2,
  },
  {
    activity_type: "groupA",
    count: 8,
    year: 2020,
    month: 2,
  },
  {
    activity_type: "groupB",
    count: 8,
    year: 2020,
    month: 1,
  }
];

const keys = ['activity_type', 'month'];
function matches(table, entry, keys) { // finds item with same values
  return table.find(e => keys.every(k => e[k] == entry[k]));
}
const usersGroupedByKeys = users.reduce((cur, val) => {
  let alreadyIn = matches(cur, val, keys);
  if (alreadyIn) {
    alreadyIn['count'] = alreadyIn['count'] + val['count'];
  } else {
    cur.push(val);
  }
  return cur;
}, []);
console.log(usersGroupedByKeys);