如何在 react.js 中显示同一项目和不同日期的值的总和
Posted
技术标签:
【中文标题】如何在 react.js 中显示同一项目和不同日期的值的总和【英文标题】:How to show the sum of the values for the same item and for different dates in react.js 【发布时间】:2021-03-30 23:05:59 【问题描述】:我有数组:
array = [
"id": 1,
"date":
"id": 1,
"name": "202001"
,
"item":
"id": 1,
"name": "I1"
,
"price": 100
,
"id": 2,
"date":
"id": 2,
"name": "202002"
,
"item":
"id": 1,
"name": "I1"
,
"price": 200
,
"id": 3,
"date":
"id": 2,
"name": "202002"
,
"item":
"id": 2,
"name": "I2"
,
"price": 300
,
]
并且我希望能够显示如表所示的数据:
ITEM | 202001 | 202002 | TOTAL |
---|---|---|---|
I1 | 100 | 200 | 300 |
I2 | - | 300 | 300 |
TOTAL | 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 = ; dates.forEach(date => 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]] = 总和; );
我做到了
<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>
我需要更正小计的显示方式。
我该怎么做,建议?
【问题讨论】:
【参考方案1】:您可以使用 reduce 执行以下操作,
array = [
"id": 1,
"date":
"id": 1,
"name": "202001"
,
"item":
"id": 1,
"name": "I1"
,
"price": 100
,
"id": 2,
"date":
"id": 2,
"name": "202002"
,
"item":
"id": 1,
"name": "I1"
,
"price": 200
,
"id": 3,
"date":
"id": 2,
"name": "202002"
,
"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>
【讨论】:
太棒了!!非常感谢您的帮助!它可以完美地计算每个日期的值。我添加了一个答案,以便您可以看到我如何显示这些值。我现在如何查看每个项目的小计? 还有一个疑问:我分享了一个答案,因为我在表格中显示它,我需要更正横向小计。 更新问题,以便您了解我如何显示值 更新了代码,如果你事先计算过sumPerItem,请使用<td>sumPerItem[item]</td>
而不是映射到sumPerItem。
你好@sabbir.alam 我已经发布了一个我需要了解以继续学习和发展的细节:***.com/questions/65390482/…你能帮我吗?谢谢!以上是关于如何在 react.js 中显示同一项目和不同日期的值的总和的主要内容,如果未能解决你的问题,请参考以下文章
如何在同一个存储库中使用 React.js 和 Node.js
React.js + Reactstrap 多个模态在一个组件中
如何使用 React js 在下拉菜单中的选择选项上显示不同的组件
ideal中如何添加几个不同的项目在同一个idea页面显示(同一个窗口显示多个工程)