下午好。我想显示一年中的月份和每个类别的花费。 例如:
{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:
}
并且值将由数组的值填充。我试图创建一个函数来接收月数据作为参数,然后使用索引(例如:food:monthArgument[3].price),但我得到“无法读取未定义的价格”。我已经进行了一些搜索,但找不到响应。拜托,我被困在这里,有人可以帮助我吗?
这个问题似乎并不重要,但我使用的是 React、Node、mySQL、Nivo/barChart
答案 0 :(得分: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);
答案 1 :(得分: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'));
答案 2 :(得分: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))