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

        }
    ]

我要呈现此表中的数据：

只关注参与者。如您所见，数据填充不正确，因为它是按行填充的，例如，对于定义的供款养老金，它应该跳过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>;
                                }
                              });
                            })}

{element.Participants.reverse（）.map（（el，ind）=>{
返回唯一年份。map（（e，i）=>{
//控制台日志（el.年）；
如果（el.Year==e）{
控制台日志（el.年）；
返回(
${数字（el.Value）.format（“0,0”）}
);
}否则{
返回-；
}
});
})}

唯一年份=[201620172018] 元素是单个对象（我在上面有另一个贴图）。如你所见，我正在映射1次参与者和1次唯一年份，并在元素年份相等的条件下找到1条记录。正如您所看到的，它没有放置破折号，而且填充表也不正确。我试着以另一种方式循环——首先是在uniqueYears数组上循环，然后是元素。但再次，它并没有像预期的那样工作。你知道怎么做吗？ 注意：表格应该是这样的：

---

但让我们只关注示例中的参与者。

我曾尝试在尽可能短的时间内提出一个非常糟糕的解决方案，但它似乎对我有效

pensionplan

和

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）

时使用了

=

而不是

=

。虽然这是正确的，但由于它不检查类型，因此以后可能会有一些影响

---

您可以在控制台中看到我的答案

好的，我为您的问题制定了解决方案

因此，为了从您的表中获取年份，我制作了一个简单的函数，它只返回

统计表标题中的年份，而不是使用预定义的
uniqueYears=[2016、2017、2018]
，但如果需要，可以随意使用它

Obs.：使用此函数的优点是，您不需要更新年份标题和uniqueYears数组，只更新html表格标题，即可获得所有的新数据

因此，如果您选择使用上面的函数，请确保您的html表中包含此函数，该函数需要
data statistics=“year”


2016
2017
2018

紧接着，要获取每个数据的条目，您可以使用，它为您提供对象的每个属性的
键和
条目。
方法是删除
类型
属性，只关注统计数据

for（养老金计划汇总的施工计划）{
设PlanEntries=Object.entries（平面）；
平面中心=平面中心拼接（1，平面中心长度-1）；
用于（行星中心的常数）{
//pe[0]->标题
//pe[1]->数据
getRow（pe[0]，pe[1]）；
}
}

然后，使用带有简单for循环的条目，您可以实现将所有内容附加到
数据中，并返回
html
行

函数getRow（index=”“，data=null）{
让years=getYears（）；//在此处使用uniqueYears数组。
让html=“”
//按年排序
data=data.slice（0）；
数据排序（（a，b）=>{
返回a.年-b.年；
})
html+=`${index}`；
for（数据常数）{
while（years.length！==0）{
如果（d.Year==年[0]）{
html+=`${d.Value}`；
年。移位（）；
打破
}否则{
html+=`-`；
}
年。移位（）；
}
}
html+=“”；
//log（html）；
返回html；
}

最终结果将是以下html：


参与者
-
-
425

或者对于您的2年数据参与者：


参与者
-
389
252

现在，您只需要在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;
}