Динамически отображать информацию из двух массивов

Question

У меня есть эти данные:

"PensionPlanSummary": [
        {
            "Type": "DefinedContributionPension",
            "Participants": [
                {
                    "Year": 2018,
                    "Value": 425.0
                }
            ],
            "TotalAssets": [
                {
                    "Year": 2018,
                    "Value": 629282.0
                }
            ],
            "NetAssets": [
                {
                    "Year": 2018,
                    "Value": 629282.0
                }
            ],

        },
        {
            "Type": "Welfare",
            "Participants": [
                {
                    "Year": 2018,
                    "Value": 252.0
                },
                {
                    "Year": 2017,
                    "Value": 389.0
                }
            ],
            "TotalAssets": [
                {
                    "Year": 2018,
                    "Value": 0.0
                },
                {
                    "Year": 2017,
                    "Value": 0.0
                }
            ],
            "NetAssets": [
                {
                    "Year": 2018,
                    "Value": 0.0
                },
                {
                    "Year": 2017,
                    "Value": 0.0
                }
            ]

        }
    ]

Я хочу отобразить данные в этой таблице:

Сосредоточиться только на участниках. Как видите, данные не заполнены правильно, потому что они заполняются по строкам и, например, они должны пропустить 2016 и 2017 годы для DefinedContributionPension и заполнить 2018. Эта таблица является результатом этого кода:

{element.Participants.reverse().map((el, ind) => {
                              return uniqueYears.map((e, i) => {
                                // console.log(el.Year);
                                if (el.Year == e) {
                                  console.log(el.Year);
                                  return (
                                    <td key={ind}>
                                      ${numeral(el.Value).format("0,0")}
                                    </td>
                                  );
                                } else {
                                  return <td key={ind}> - </td>;
                                }
                              });
                            })}

uniqueYears = [2016,2017,2018] элемент - единственный объект (у меня есть другая карта выше). Итак, как вы можете видеть, я картирую 1 раз участников и 1 раз уникальных лет и нахожу 1 запись, которая верна для условия равенства элемента года. Как вы можете видеть, он не ставит da sh - и он не заполняет таблицу правильно. Я попытался выполнить цикл другим способом - сначала l oop по массиву uniqueYears, а затем по элементу. Участники, но опять-таки он не работал должным образом. Есть идеи как это сделать? PS: Таблица должна выглядеть следующим образом:

Но давайте сосредоточимся только на участниках, как в примере.

Answer 1

Хорошо, я решил вашу проблему!

Итак, чтобы получить годы из вашей таблицы, я сделал простую функцию, которая просто возвращает годы из вашего statistics table header вместо использования предопределенный uniqueYears = [2016, 2017, 2018], но не стесняйтесь использовать его, если вам нужно.

Обс .: Преимущество использования этой функции заключается в том, что вам не нужно обновлять заголовок года и массив uniqueYears, обновлять только заголовки таблицы html и получать новые данные для все.

function getYears() {
  let years = [];
  for(const cell of document.querySelectorAll("[data-statistics='year'] th")) {
    if(cell.innerText.trim() !== "") years.push(parseInt(cell.innerText));
  }
  return years;
}

Так что, если вы решите использовать вышеуказанную функцию, убедитесь, что у вас в таблице html это, data-statistics="year" требуется для функции.

<thead>
    <tr data-statistics="year">
        <th></th>
        <th>2016</th>
        <th>2017</th>
        <th>2018</th>
    </tr>
</thead>

Сразу после этого, чтобы получить записи каждого из ваших данных, вы можете использовать Object.entries () , который дает вам key и entry каждого свойства ваш объект. Array.prototype.splice () предназначен для удаления свойства type, фокусируясь только на статистических данных.

for(const Plan of PensionPlanSummary) {
  let PlanEntries = Object.entries(Plan);

  PlanEntries = PlanEntries.splice(1, PlanEntries.length - 1);
  for(const pe of PlanEntries) {
    // pe[0] -> Title
    // pe[1] -> Data
    getRow(pe[0], pe[1]);
  }
}

Затем с вашими записями с помощью простых циклов for вы можете Получите ваши данные, добавив все в <td>Data</td> и верните строку html;

function getRow(index = "", data = null) {
  let years = getYears(); // Use your uniqueYears array here.
  let html = "<tr>"

  // Sort by year
  data = data.slice(0);
  data.sort((a, b) => {
    return a.Year - b.Year;
  })

  html += `<td>${index}</td>`;

  for (const d of data) {
    while (years.length !== 0) {
      if (d.Year === years[0]) {
        html += `<td>${d.Value}</td>`;
        years.shift();
        break;
      } else {
        html += `<td>-</td>`;
      }
      years.shift();
    }
  }

  html += "</tr>";

    // console.log(html);
  return html;
}

Окончательный результат будет таким: html:

<tr>
    <td>Participants</td>
    <td>-</td>
    <td>-</td>
    <td>425</td>
</tr>

Или за 2 года данные участников:

<tr>
    <td>Participants</td>
    <td>-</td>
    <td>389</td>
    <td>252</td>
</tr>

Теперь вам нужно только добавить в свой html, как вы хотите, взгляните на JsFiddle , если вам нужно.

It немного грязный код, но надеюсь, он поможет!

Answer 2

Я пытался найти очень грязное решение как можно быстрее, но, похоже, оно работает для меня

pensionPlans и uniqueYears - это массивы, которые вы упомянули. Мой код ниже

pensionPlans.map(e => {
    if(e.Type === "DefinedContributionPension"){
uniqueYears.map(year => {
    e.Participants.map(item => {
    if(item.Year === year){
     console.log('found')
    } else {
    console.log("not found")
    }
    })
})
  }
})

Также я заметил, что вы использовали == вместо === при проверке на if (el.Year == e). Хотя это и правильно, это может иметь некоторые последствия позже, так как не проверяет тип.

Мой ответ работает в консоли здесь https://jsfiddle.net/z65mp0s8/