javascript - 使用内部表填充动态表 - JavaScript

Question

我不知道如何动态填充我的表格。该表是端点响应的结果:

 {props.types[2].length > 0 ? (
            <div className="onepager-bottomtables-table ">
              <h1 className="onepager-bottomtables-h1">UNIQUE Types</h1>
              <table className="table table-striped table-bordered table-sm table-hover">
                <thead className="thead-dark">
                  <tr>
                    <th>Type</th>
                    <th>Plan Name</th>
                    <th>More</th>
                    <th>Statistics</th>
                  </tr>
                </thead>
                <tbody className="table-hover">
                  {DataExtract.uniquePensionTypes(props.types[2]).map(
                    (element, index) => (
                      <tr key={index}>
                        <td className="align-middle" id="types-type">
                          {element}
                        </td>
                        <td className="align-middle">{element}</td>
                        <td className="align-middle">More</td>
                        <td>
                   //***THIS IS THE PROBLEM PART OF THE CODE********
                          <table className="onepager-small-table">
                            <thead>
                              <tr>
                                <th></th>
                                {DataExtract.uniqueYearsPension(props.types[2]).map(
                                  (element, index) => (
                                    <th key={index}>{element}</th>
                                  )
                                )}
                              </tr>
                            </thead>
                            <tbody>
                              {console.log(
                                DataExtract.participantsPension(props.types[2])
                              )}
                              <tr>
                                <th>Participants</th>
                              </tr>

                              <tr>
                                <th>Total Asset</th>
                              </tr>
                              <tr>
                                <th>Net Asset</th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    )
                  )}
                </tbody>
              </table>
            </div>
          ) : (
            ""
          )}

我粘贴了所有代码来获取图片。我得到的数据(props.types[2])如下所示:

"SumPensionTypes": [
        {
            "Type": "DefinedBenefitPension",
            "Description": null,
            "Year": 2016,
            "Participants": 9.0,
            "TotalAssets": 6668305.0,
            "NetAssets": 6668305.0,
            "PlanName": null
        },
        {
            "Type": "DefinedContributionPension",
            "Description": null,
            "Year": 2016,
            "Participants": 72.0,
            "TotalAssets": 17230395.0,
            "NetAssets": 17230395.0,
            "PlanName": null
        },
        {
            "Type": "DefinedBenefitPension",
            "Description": null,
            "Year": 2017,
            "Participants": 7.0,
            "TotalAssets": 2096999.0,
            "NetAssets": 2096999.0,
            "PlanName": null
        },
        {
            "Type": "DefinedContributionPension",
            "Description": null,
            "Year": 2017,
            "Participants": 56.0,
            "TotalAssets": 16114639.0,
            "NetAssets": 16114639.0,
            "PlanName": null
        },
        {
            "Type": "DefinedBenefitPension",
            "Description": null,
            "Year": 2018,
            "Participants": 0.0,
            "TotalAssets": 0.0,
            "NetAssets": 0.0,
            "PlanName": null
        },
        {
            "Type": "DefinedContributionPension",
            "Description": null,
            "Year": 2018,
            "Participants": 49.0,
            "TotalAssets": 21954205.0,
            "NetAssets": 21954205.0,
            "PlanName": null
        }
    ]

所以目前一切看起来都像这张图:

现在是最困难的部分(对我来说)。我试图用相同类型的对象的汇总数据填充小表。从数据中可以看出，有两种类型 - DefinedBenefitPension 和 DefinedContributionPension，这两种类型在 2016、2017、2018 年重复。我将它们与此方法结合起来并将它们填充到第一列中:

//***************DIFFERENT PENSION TYPES********************* */
const uniquePensionTypes = data => {
  const unique = [...new Set(data.map(plan => plan.Type))];
  return unique;
};

问题是我想根据计划类型填充小表。如果您看到图片和数据，您就会明白它应该如何填充，因为它们具有相同的类型，但统计数据是逐年的。

Answer 1

这里有一些示例代码可以提供帮助。

getDataRow 是一个辅助函数，需要 3 个参数:

1. 您的数据 (props.types[2])
2. 养老金类型(“DefinedBenefitPension”或“DefinedContributionPension”)
3. 指标(例如“参与者”)

您可以使用生成的对象根据年份映射到表格单元格。

https://repl.it/repls/UprightAdmiredBlogclient

// DataExtract.uniqueYearsPension(props.types[2])
const years = [2016, 2017, 2018]

function getDataRow(data, type, key) {
    const rowData = {}

    data.filter(pension => pension.Type == type).forEach(pension => {
      rowData[pension.Year] = pension.Participants
    })

    return rowData
}

// { '2016': 9, '2017': 7, '2018': 0 }
const participants = getDataRow(data, 'DefinedBenefitPension', 'Participants')

// <td key=2016>9</td>
// <td key=2017>7</td>
// <td key=2018>0</td>
const row = years.map(year => {
  return <td key={year}>
    {participants[year]}
  </td>
})