时间戳

首页 > 解决方案 > 动态渲染来自两个数组的信息

javascript - 动态渲染来自两个数组的信息

问题描述

我有这个数据：

"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
                }
            ]

        }
    ]

我想在这个表中呈现数据： 在此处输入图像描述

只关注参与者。如您所见，数据未正确填充，因为它是按行填充的，例如，对于 DefinedContributionPension，它应该跳过 2016 年和 2017 年并填充 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 条记录，该记录对于元素年份相等的条件是正确的。如您所见，它没有放置破折号 - 并且它没有正确填充表格。我尝试以其他方式循环 - 首先循环遍历 uniqueYears 数组，然后循环到 element.Participants 但它再次没有按预期工作。任何想法如何制作它？PS：表格应该是这样的： 在此处输入图像描述

但是，让我们只关注参与者，例如示例。

标签： javascriptarraysreactjshtml-table

解决方案

好的，我为你的问题做了一个解决方案！

所以，为了从你的表中获取年份，我做了一个简单的函数，它只返回你的年份statistics table header，而不是使用预定义的uniqueYears = [2016, 2017, 2018]，但如果你需要，可以随意使用它。

Obs.: 使用这个函数的好处是你不需要更新你的年份标题和你 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 表中有 this，这data-statistics="year"是该函数所必需的。

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

之后，要获取每个数据的条目，您可以使用Object.entries()，它为您提供对象的每个属性的key和。Array.prototype.splice()entry是去掉属性，只关注统计数据。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。

这是一个有点脏的代码，但希望它有帮助！

推荐阅读