javascript - 在表中显示反应中相同项目的值
问题描述
我正在用 React.JS 开发一个应用程序
我有数组:
const array = [
{
"id": 1,
"date": {
"id": 1,
"name": "202001"
},
"item": {
"id": 1,
"name": "I1",
"description": "item1"
},
"type": {
"id": 1,
"name": "type1"
},
"price": 100,
"unit": "unit1"
},
{
"id": 2,
"date": {
"id": 2,
"name": "202002"
},
"item": {
"id": 1,
"name": "I1",
"description": "item1"
},
"type": {
"id": 1,
"name": "type1"
},
"price": 200,
"unit": "unit1"
},
{
"id": 3,
"date": {
"id": 2,
"name": "202002"
},
"item": {
"id": 2,
"name": "I2",
"description": "item2"
},
"type": {
"id": 2,
"name": "type2"
},
"price": 300,
"unit": "unit2"
},
]
我显示的数据如下表所示:
物品 | 类型 | 202001 | 202002 | 全部的 |
---|---|---|---|---|
I1 // 项目 1 | 类型1 | 100 // 单元 1 | 200 // 单元 1 | 300 |
i2 // 项目 2 | 类型1 | - | 300 // 单元 2 | 300 |
全部的 | 100 | 500 | 600 |
我这样做是为了获得一些值:
items = array.reduce((acc, e) => {
if (!acc[e["item"]["name"]]) {
acc[e["item"]["name"]] = {
[e["date"]["name"]]: e["price"],
'type': e.type?.name,
'description': e.item?.description,
}
} else {
acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
}
return acc
}, {})
dates = [...new Set(Object.keys(items).map(i => Object.keys(items[i])).flat())]
totalSumPerDate = {};
dates.forEach(date => {
const sumOnDate = Object.values(items).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).forEach(key => {
const sum = Object.values(items[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} // {items[item]?.description}</td>
<td>{items[item]?.type}</td>
{dates.map((date) => <td>{items[item][date] || ''}</td>)}
<td>{sumPerItem[item]}</td>
</tr>
)
})
}
<tr>
<td>TOTAL</td>
{Object.values(totalSumPerDate).map(item => <td>{item}</td>)}
<td>{totalSum}</td>
</tr>
</tbody>
</table>
我需要添加description
,type
并且unit
,我试图这样做,但它给我带来了一切dates
。
如何使用上述方法修复它以正确显示表格,建议?
解决方案
For example:
{array.map(row => <tr>
<td>{row.id}</td>
<td>{row.date.id}</td>
<td>{row.date.name}</td>
</tr>)}
推荐阅读
- sql-server - CTE 对循环数据的意外结果
- jquery - AJAX 成功等待所有元素被创建,直到它显示它们,为什么不 1 by 1?
- python - 我正在尝试在 python 中为一些家庭作业创建一个注册和登录系统。虽然它没有按预期工作
- amazon-web-services - 如何从 CF 中的另一个模板中检索秘密管理器名称?
- php - Magento2 如何以编程方式更新产品信息(PHP 脚本)?
- html - 我怎样才能使这个文本用框调整大小
- swift4 - Alamofire 等待完成
- javascript - 如何解决反应中的元素类型无效错误
- java - 如何将 Flux 从 Mono 中的列表中删除?
- sql - 仅选择条件