如何解决如何在 react.js 中显示相同项目和不同日期的值的总和
我有数组:
array = [
{
"id": 1,"date": {
"id": 1,"name": "202001"
},"item": {
"id": 1,"name": "I1"
},"price": 100
},{
"id": 2,"date": {
"id": 2,"name": "202002"
},"price": 200
},{
"id": 3,"item": {
"id": 2,"name": "I2"
},"price": 300
},]
而且我希望能够显示表中所示的数据:
项目 | 202001 | 202002 | 总计 |
---|---|---|---|
I1 | 100 | 200 | 300 |
I2 | - | 300 | 300 |
总计 | 100 | 500 | 600 |
我试过了
const items_dicc = array.reduce((acc,e) => {
if (!acc[e["item"]["name"]]) {
acc[e["item"]["name"]] = {
[e["date"]["name"]]: e["price"]
}
} else {
acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
}
return acc
},{})
const dates = [...new Set(Object.keys(items_dicc).map(i => Object.keys(items_dicc[i])).flat())]
要显示同一项目的每个日期的值,现在我需要以上内容来计算小计和总计。
编辑:使用@sabbir.alam 答案
totalSumPerDate = {};日期.forEach(日期=> { const sumOnDate = Object.values(items_dicc).reduce((acc,curr) => { acc = acc + (curr[date]?curr[date] : 0); 返回acc; },0); totalSumPerDate[[日期]] = sumOnDate; });
totalSum = Object.values(totalSumPerDate).reduce((acc,curr) => acc+curr,0);
sumPerItem = {}; Object.keys(items_dicc).forEach(key => { const sum = Object.values(items_dicc[key]).reduce((acc,curr) => acc + curr,0); sumPerItem[[key]] = sum; });
我做到了
<table>
<thead>
<tr>
<th>ITEM</th>
{dates.map(date => <th>{date}</th>)}
<th>TOTAL</th>
</tr>
</thead>
<tbody>
{
Object.keys(items_dicc).map((item) => {
return (
<tr>
<td>{item}</td>
{dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
{Object.values(sumPerItem).map((elem,i) => <td>{elem}</td>)}
</tr>
)
})
}
<tr>
<td>TOTAL</td>
{Object.values(totalSumPerDate).map((elem,i) => <td>{elem}</td>)}
<td>{totalSum}</td>
</tr>
</tbody>
</table>
我需要更正边小计的显示方式。
我该怎么做,建议?
解决方法
您可以使用 reduce 执行以下操作,
array = [
{
"id": 1,"date": {
"id": 1,"name": "202001"
},"item": {
"id": 1,"name": "I1"
},"price": 100
},{
"id": 2,"date": {
"id": 2,"name": "202002"
},"price": 200
},{
"id": 3,"item": {
"id": 2,"name": "I2"
},"price": 300
},]
items_dicc = array.reduce((acc,e) => {
if (!acc[e["item"]["name"]]) {
acc[e["item"]["name"]] = {
[e["date"]["name"]]: e["price"]
}
} else {
acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
}
return acc
},{})
dates = [...new Set(Object.keys(items_dicc).map(i => Object.keys(items_dicc[i])).flat())]
totalSumPerDate = {};
dates.forEach(date => {
const sumOnDate = Object.values(items_dicc).reduce((acc,curr) => {
acc = acc + (curr[date]? curr[date] : 0);
return acc;
},0);
totalSumPerDate[[date]] = sumOnDate;
});
totalSum = Object.values(totalSumPerDate).reduce((acc,curr) => acc+curr,0);
sumPerItem = {};
Object.keys(items_dicc).forEach(key => {
const sum = Object.values(items_dicc[key]).reduce((acc,curr) => acc + curr,0);
sumPerItem[[key]] = sum;
});
console.log('Sum per item: ',sumPerItem);
console.log('Sum per date: ',totalSumPerDate);
console.log('TotalSum: ',totalSum);
更新每个项目的小计,
<table>
<thead>
<tr>
<th>ITEM</th>
{dates.map(date => <th>{date}</th>)}
<th>TOTAL</th>
</tr>
</thead>
<tbody>
{
Object.keys(items_dicc).map((item) => {
return (
<tr>
<td>{item}</td>
{dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
<td>{sumPerItem[item]}</td>
</tr>
)
})
}
<tr>
<td>TOTAL</td>
{Object.values(totalSumPerDate).map((elem,i) => <td>{elem}</td>)}
<td>{totalSum}</td>
</tr>
</tbody>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。