Заполните динамический c стол с внутренним столом - 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
        }
    ]

Так что в настоящее время все выглядит так:

Теперь самое сложное (для меня). Я пытаюсь заполнить небольшие таблицы суммированными данными для объектов того же типа. Как видно из данных, существует 2 типа - 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. Метри c (например, «Участники»)

Полученный объект можно использовать для сопоставления с ячейками таблицы в соответствии с в год.

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>
})