L oop через массив и заполнить матрицу - JS

Question

Я хочу заполнить матричную таблицу динамически. У меня есть эта часть ответа API:

"Characteristics": [
            {
                "Description": "Benefits - Pay Related",
                "Years": [
                    2018,
                    2017,
                    2016
                ]
            },
            {
                "Description": "Benefits - Preapproved",
                "Years": [
                    2018,
                    2017,
                    2016
                ]
            },
            {
                "Description": "Benefits - Age/Service Weighted Plan",
                "Years": [
                    2018,
                    2017
                ]
            },
            {
                "Description": "Benefits - Profit Sharing",
                "Years": [
                    2018,
                    2017,
                    2016
                ]
            },
            {
                "Description": "Benefits - 404c",
                "Years": [
                    2018,
                    2017,
                    2016
                ]
            },
            {
                "Description": "Benefits - Participant Directed",
                "Years": [
                    2018,
                    2017,
                    2016
                ]
            },
            {
                "Description": "Benefits - 401(K)",
                "Years": [
                    2018,
                    2017
                ]
            },
            {
                "Description": "Benefits - 401(m) Arrangement",
                "Years": [
                    2018,
                    2017,
                    2016
                ]
            },
            {
                "Description": "Benefits - Auto Enrollment",
                "Years": [
                    2018,
                    2017
                ]
            }

Как видите, «Описание» существует всегда, но не на все годы. В конце я хочу получить что-то вроде этого:

Приведенная таблица не связана с данными - как вы можете видеть для "Преимущества" - Взвешенный план по возрасту / обслуживанию "в" Годах "нет 2016 года, поэтому я хочу, чтобы был" N ". У меня есть функция, чтобы обнаружить уникальные годы из другой части данных, которые содержат все годы, для которых предоставляется любая информация. Это в ответе API:

const uniqueYearsPension = data => {
  return data.map(element => {
    return element.Year;
  });
};

Я пытался заполнить таблицу следующим образом:

<table className="table table-striped table-bordered table-sm table-hover">
                  <thead className="thead-dark">
                    <tr>
                      <th>Description</th>
                      {DataExtract.uniqueYearsPension(
                        props.types[2][index]
                      ).map((el, ind) => {
                        return <th key={ind}>{el}</th>;
                      })}
                    </tr>
                  </thead>
                  <tbody className="table-hover">
                    {element.Characteristics &&
                      element.Characteristics.map((e, i) => {
                        return (
                          <tr key={i}>
                            <td>{e.Description}</td>
                            {e.Years.reverse().map((year, yearID) => {
                              console.log(year);
                              return DataExtract.uniqueYearsPension(
                                props.types[2][index]
                              ).map((el, ind) => {
                                console.log(year);
                                if (year == el) {
                                  return <td key={yearID}>Y</td>;
                                }
                              });
                            })}
                          </tr>
                        );
                      })}
                  </tbody>
                </table>

Но она заполняет строку 1 на 1, и если отсутствует 2016, это ставит результат 2017 в этот столбец и так 2018 пуст вместо 2016 года - что абсолютно нормально. Если я добавлю еще оператор здесь:

if (year == el) {
                                  return <td key={yearID}>Y</td>;
                                } else return <td key={yearID}>N</td>

Это выводит в строку много-много результатов. Любые идеи, как заполнить мою таблицу как матрицу?

Answer 1

Сначала попытайтесь сохранить результат uniqueYearsPension в переменной, чтобы избежать пересчета. А затем во время рендеринга tr просто сопоставьте все годы и проверьте, включает ли e.Years значение. Код будет выглядеть так:

const uniqueYears = DataExtract.uniqueYearsPension(props.types[2][index]);
...
...
<table className="table table-striped table-bordered table-sm table-hover">
    <thead className="thead-dark">
        <tr>
            <th>Description</th>
            {
                uniqueYears.map((value, key) => {
                    return <th key={key}>{value}</th>;
                })
            }
        </tr>
    </thead>
    <tbody className="table-hover">
        {element.Characteristics &&
            element.Characteristics.map((e, i) => {
                return (
                    <tr key={i}>
                        <td>{e.Description}</td>
                        {
                            uniqueYears.map((year, yearID) => {
                                if (e.Years.includes(year)) {
                                    return <td key={yearID}>Y</td>;
                                } else {
                                    return <td key={yearID}>N</td>;
                                }
                            })
                        }
                    </tr>
                );
            })}
    </tbody>
</table>