javascript - 动态呈现来自两个数组的信息

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

        }
    ]

我想在此表中呈现数据:

只关注参与者。如您所见，数据填充不正确，因为它是按行填充的，例如，对于 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]element 是单个对象(我上面有另一张 map )。因此，正如您所看到的，我映射了 1 次参与者和 1 次独特年份，并找到了元素年份相等条件下的 1 条记录。如您所见，它没有放置破折号 - 并且没有正确填充表格。我尝试以其他方式循环 - 首先遍历 uniqueYears 数组，然后循环到 element.Participants 但它再次没有按预期工作。任何想法如何做到这一点？P.S.:表格应该是这样的:

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

Answer 1

我尝试在尽可能短的时间内想出一个非常肮脏的解决方案，但它似乎对我有用

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/