0

下午好。我想显示一年中的月份以及在每个类别中花费的金额。前任：

{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"

我从我的服务器获取所有月份的对象数组。像这样的东西：

(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"}

我创建了一个过滤月份的函数：

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

    return monthData;
  }

我用它来分别获取月份：

  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");

当我调用 console.log(janData) 我看到这个：

[{…}, {…}, {…}, {…}]
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"}

我想从包含月份数据的数组中（janData、fevData 等）创建一个像这样的对象：

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

并且这些值将由数组的值填充。我试图创建一个函数来接收monthData作为参数，然后使用索引（例如：food：monthArgument [3] .price），但我得到“无法读取未定义的价格”。我进行了一些搜索，但找不到回复。拜托，我被困在这里，有人可以帮助我吗？

这个问题似乎并不重要，但我正在使用 React、Node、mySQL、Nivo/barChart

4

3 回答 3

2

没有必要一次一个月地这样做。您可以一次性获取整组数据并创建所有结果。

基本上，这个想法是通过monthname使用进行分组reduce，然后进一步减少每个月的匹配行以形成每个月的单个对象。

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);

于 2021-05-25T13:23:55.640 回答
1

下面的代码应该做的事情。

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'));

于 2021-05-25T13:26:50.277 回答
1

您可以使用一个简单reduce的每个month作为累加器中的键。将每个category和颜色添加到每个月对象

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))

于 2021-05-25T13:29:13.373 回答