我需要将我的对象数组转换为一个具有特定键的对象

编程问答 2022-04-30

问题描述

下午好。我想显示一年中的月份和每个类别的花费。 例如：

{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",category: "Health",price: 233,color: "#2BC4A9"}
2: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",category: "Transport",price: 30,color: "#0D95BC"}
3: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",category: "Others",price: 121,color: "#C13018"}
4: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname: "October",price: 113,color: "#2BC4A9"}
5: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",price: 330,color: "#0D95BC"}
6: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",price: 650,color: "#C13018"}
7: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",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) 时，我看到：

[{…},monthname: "January",color: "#2BC4A9"}
1: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",color: "#0D95BC"}
2: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",color: "#C13018"}
3: {id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",color: "#063951"}

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

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

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

这个问题似乎并不重要，但我使用的是 React、Node、MysqL、Nivo/barChart

解决方法

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

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

const input = [{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname: "September",category: "Food",price: 610,color: "#063951"},{id: "zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",category: "Health",price: 233,color: "#2BC4A9"},category: "Transport",price: 30,color: "#0D95BC"},category: "Others",price: 121,color: "#C13018"},monthname: "October",price: 113,price: 330,price: 650,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);

,

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

const totalTransactionsPerMonth = [
    {id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1',monthname: 'September',category: 'Food',color: '#063951'},{id: 'zxFBMv43ZGgHJpd6a3tjyTO3Rxg1',category: 'Health',color: '#2BC4A9'},category: 'Transport',color: '#0D95BC'},category: 'Others',color: '#C13018'},monthname: 'October',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'));

,

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

const input=[{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",monthname:"September",category:"Food",price:610,color:"#063951"},{id:"zxFBMv43ZGgHJpd6a3tjyTO3Rxg1",category:"Health",price:233,color:"#2BC4A9"},category:"Transport",price:30,color:"#0D95BC"},category:"Others",price:121,color:"#C13018"},monthname:"October",price:113,price:330,price:650,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))

arraysarraysarraysjavascriptnivo-reactreactjsreactjsreactjsreactjs