如何在 Javascript 中添加对象数组中项目的数字以输出到表格

Question

这是数组：年份数据：

[{"Years":2023,"New":305,"Updates":360},
 {"Years":2022,"New":334,"Updates":467},
 {"Years":2021,"New":272,"Updates":502},
 {"Years":2020,"New":291,"Updates":377},
 {"Years":2019,"New":327,"Updates":365}]

我有工作代码来创建年份、新增、更新和总计表。

<tbody>
{parsedAdmin2ReportData.map((row, index) => (
  <tr key={index}>
    <td>{row.Years}</td>
    <td>{row.New}</td>
    <td>{row.Updates}</td>
    <td>{row.New + row.Updates}</td>
    <td>{parsedAdmin2ReportData[index].New}</td>
  </tr>
))}
</tbody>

我想添加另一列来显示同比百分比变化，但无法获取上一年的值

例如，2023 年同比变化公式为

((row New of 2022 + row Updates of 2022) -(row New + row Updates))/(row New of 2022 + row Updates of 2022)

数字将显示为百分比值，如果为负，则为红色，如果为正，则为绿色。
2019 年行不会进行计算。

我以为我可以像

parsedAdmin2ReportData[index-1].New

一样浏览索引

但这没有用。我也尝试过索引——但没有成功。有没有办法获取表中的值并对它们运行数学函数。

有什么建议吗？

Answer 1

您可以在地图函数中进行一些额外的计算。

<tbody>
{parsedAdmin2ReportData.map((row, index, arr) => ({
  let yoy = "";
  if (index < arr.length - 1) { // it's not the last row
    let nextRow = arr[index + 1]; // get the next row
    let nextTot = nextRow.New + nextRow.Updates;
    let diff = (nextTot - (row.New + row.Updates)) / nextTot;
    yoy = diff.toFixed(2) + "%"; // or whatever format
  }
  
  return <tr key={index}>
    <td>{row.Years}</td>
    <td>{row.New}</td>
    <td>{row.Updates}</td>
    <td>{row.New + row.Updates}</td>
    <td>{parsedAdmin2ReportData[index].New}</td>
    <td>{yoy}</td>
  </tr>
}
))}
</tbody>