I need to convert my array of objects into one object with specific keys

Question

Good afternoon. I want to display the months of the year and the amount spent in each category. Ex:

{Month: "January", Food: 610, foodColor: "#063951", Others: 121, othersColor: "#C13018", …}
Food: 610
Health: 233
Month: "January"
Others: 121
Transport: 30
foodColor: "#063951"
healthColor: "#2BC4A9"
othersColor: "#C13018"
transportColor: "#0D95BC"

I'm getting from my server an array of objects with all months. Something like that:

(43) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Food", price: 610, color: "#063951"}
1: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Health", price: 233, color: "#2BC4A9"}
2: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Transport", price: 30, color: "#0D95BC"}
3: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Others", price: 121, color: "#C13018"}
4: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Health", price: 113, color: "#2BC4A9"}
5: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Transport", price: 330, color: "#0D95BC"}
6: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Others", price: 650, color: "#C13018"}
7: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Food", price: 170.55, color: "#063951"}

I've created a function to filter the month:

 const getMonth = (month) => {
    let monthData = totalTransactionsPerMonth.filter((transaction) =>{
       return transaction.monthname === `${month}`     
    })

    return monthData;
  }

and I'm using it to get the months separately:

  let janData = getMonth("January");
  let fevData = getMonth("February");
  let marData = getMonth("March");
  let aprData = getMonth("April");
  let mayData = getMonth("May");
  let junData = getMonth("June");
  let julData = getMonth("July");
  let augData = getMonth("August");
  let sepData = getMonth("September");
  let octData = getMonth("October");
  let novData = getMonth("November");
  let decData = getMonth("December");

When I call console.log(janData) I see this:

[{…}, {…}, {…}, {…}]
0: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "January", category: "Health", price: 233, color: "#2BC4A9"}
1: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "January", category: "Transport", price: 30, color: "#0D95BC"}
2: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "January", category: "Others", price: 121, color: "#C13018"}
3: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "January", category: "Food", price: 610, color: "#063951"}

I want from that array with the months data, (janData, fevData, etc..) create an object like this:

const January = {
    month: 
    food: 
    foodColor: 
    others: 
    othersColor:
    transport: 
    transportColor: 
    health: 
    healthColor: 
   }

and the values will be filled by the values of the array. I've tried to create a function to receive as argument the monthData and then use the index (Ex: food: monthArgument[3].price) but I get " cannot read price of undefined". I've made some search but I could not find a response. Please, I'm stuck here, could someone help me?

It doesn't seems important to the question but I'm using React, Node, mySQL, Nivo/barChart

Do you really want to do this one month at a time or are you really just trying to get all months aggregated up? — Jamiec, May 25 '21 at 13:15
Well, I need in the end, an array of objects and each object will be a different month of the year. — Amauri Santos, May 25 '21 at 13:17

score 2 · Accepted Answer · answered May 25 '21 at 13:23

There's no need to do this one month at a time. You can take the entire set of data and create all the results in one go.

Basically, the idea is to group by monthname using reduce and then further reduce the matched rows for each month to form a single object per month.

const input = [{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Food", price: 610, color: "#063951"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Health", price: 233, color: "#2BC4A9"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Transport", price: 30, color: "#0D95BC"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "September", category: "Others", price: 121, color: "#C13018"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Health", price: 113, color: "#2BC4A9"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Transport", price: 330, color: "#0D95BC"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Others", price: 650, color: "#C13018"},
{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1", monthname: "October", category: "Food", price: 170.55, color: "#063951"}];

const result = Object.fromEntries(Object.entries(input.reduce( (acc, i) => {
  if(!acc[i.monthname]) acc[i.monthname] = [];
  acc[i.monthname].push(i);
  return acc
},{}))
  .map( ([month,rows]) => {  
    return [
      month,
      rows.reduce( (acc, i) => ({...acc, [i.category]: i.price, [i.category + "Color"] : i.color}),{})
    ];
  }));

console.log(result);

I love you. I'm feeling pretty dumb right now. I will try to understand what you've suggested. Thank you man. — Amauri Santos, May 25 '21 at 13:28

score 1 · Answer 2 · answered May 25 '21 at 13:26

the following code should do the stuff.

const totalTransactionsPerMonth = [
    {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'September', category: 'Food', price: 610, color: '#063951'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'September', category: 'Health', price: 233, color: '#2BC4A9'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'September', category: 'Transport', price: 30, color: '#0D95BC'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'September', category: 'Others', price: 121, color: '#C13018'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'October', category: 'Health', price: 113, color: '#2BC4A9'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'October', category: 'Transport', price: 330, color: '#0D95BC'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'October', category: 'Others', price: 650, color: '#C13018'}
    , {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1', monthname: 'October', category: 'Food', price: 170.55, color: '#063951'}
];

function getMonthData(month) {
    return totalTransactionsPerMonth
        .filter(({monthname}) => month === monthname)
        .reduce((result, row) => {
            const category = row.category.toLowerCase();
            result['month'] = month;
            result[category] = row.price;
            result[`${category}Color`] = row.color;
            return result;
        }, {});
}

console.log(getMonthData('October'));

score 1 · Answer 3 · answered May 25 '21 at 13:29

You could use a simple reduce with each month as the key in the accumulator. Add each category and color to each month object

const input=[{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"September",category:"Food",price:610,color:"#063951"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"September",category:"Health",price:233,color:"#2BC4A9"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"September",category:"Transport",price:30,color:"#0D95BC"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"September",category:"Others",price:121,color:"#C13018"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"October",category:"Health",price:113,color:"#2BC4A9"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"October",category:"Transport",price:330,color:"#0D95BC"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"October",category:"Others",price:650,color:"#C13018"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"October",category:"Food",price:170.55,color:"#063951"}];

const group = input.reduce((acc, { monthname, category, price, color }) => {
  category = category.toLowerCase();
  acc[monthname] ||= { month: monthname };
  acc[monthname][category] = price
  acc[monthname][category + 'Color'] = color
  return acc
}, {})

console.log(Object.values(group))

I need to convert my array of objects into one object with specific keys

3 Answers3