从数组中搜索 Json 键以匹配对象并推送到表答案

【问题标题】：Searching Json keys for matching object from array and push to table从数组中搜索 Json 键以匹配对象并推送到表
【发布时间】：2019-09-25 21:02:31
【问题描述】：

我正在尝试搜索 JSON 以检索与数组匹配的对象，然后将所有这些数据推送到表中。我的数组如下所示：

player_IDs: number[] = [ 1000, 1002, 1004 ]

我正在搜索的 JSON 如下所示：

{
    "allplayers": [
        {
            "Player_ID": "1004D",
            "End_Time": "2019-04-29 13:31:06"
        },
        {
            "Player_ID": "1000A",
            "End_Time": "2019-04-29 07:39:55"
        }
        {
            "Player_ID": "1002G", 
            "End_Time": "2019-04-30 09:02:21"
        }
        {
            "Player_ID": "1006B", 
            "End_Time": "2019-04-30 10:21:01"
        }
    ]
}

在 JSON 中，我不想显示其他玩家的其他数据，因为他们的 ID 不在数组中。

我目前在 HTML 中显示来自数组的 Player_ID，如下所示：

 <table id="tableContents">
    <tr>
      <th>PLayer ID</th>
      <th>End Time</th>
    </tr>
    <tr *ngFor="let id of player_IDs">
      <td>00{{ id }}</td>
      <td></td>
    </tr>
 </table>

但在它旁边的列中，我希望能够显示匹配的结束时间。我可以获取End_Time 并将其记录到控制台，但我不确定如何将其推送到表中，以便结束时间与表中的当前 Player_ID 匹配。有没有办法处理*ngFor？

这就是我获取End_Time 并将其记录到控制台的方式：

this.player_IDs.forEach(function(value) {
   var id = value.toString()
   var index = playerdata.allplayers.filter(e => e.Player_ID.includes(id))
   if (index.length!=0) {
       console.log(index[0].End_Time)
   }
})

那么，如何将End_Time 推送到表格中，以便它们与对应的 Player_ID 一起显示？

旁注：Player_ID 的显示顺序无关紧要。

【问题讨论】：

JSON 是一种用于数据交换的文本符号。 (More here.) 一旦你解析了它并在你的代码中使用它，它就不再是 JSON 了。也就是说，如果您正在处理 JavaScript 源代码，而不是处理 string，那么您就不是在处理 JSON。

标签： html arrays angular typescript

【解决方案1】：

如果我正确理解你的问题，你是想在桌子上显示相应的End_Time，对吧？在每个 td 列上，您可以将其绑定到各自的属性 Player_ID 和 End_Time。这就是它的样子：

<table id="tableContents">
    <tr>
      <th>Player ID</th>
      <th>End Time</th>
    </tr>
    <tr *ngFor="let player of data.allplayers">
      <td>{{ player.Player_ID }}</td>
      <td>{{ player.End_Time }}</td>
    </tr>
 </table>

我在这里发了quick demo。

【讨论】：

我只想显示玩家 id 在数组中的数据。所以它应该只显示 3
@JackU 是的，我明白了，您可以在结果数组上使用相同的逻辑。
我可以在表格中显示数组，类似于您的操作方式，但我如何过滤“JSON”以仅获取数组中的结束时间？
@JackU 我已经更新了我的演示，使其仅显示过滤后的数据。我还对您最初提供的代码进行了一些调整。你可以参考ngOnInit()
至于你的另一个问题，你想达到什么目的？你只想要一个只包含End_Time 的数组？

【解决方案2】：

        {
        "allplayers": [
            {
                "Player_ID": "1004D",
                "End_Time": "2019-04-29 13:31:06"
            },
            {
                "Player_ID": "1000A",
                "End_Time": "2019-04-29 07:39:55"
            },
            {
                "Player_ID": "1002G", 
                "End_Time": "2019-04-30 09:02:21"
            },
            {
                "Player_ID": "1006B", 
                "End_Time": "2019-04-30 10:21:01"
            }
        ]
    } 

    this.player_IDs.forEach(function(value) {
      var id = value.toString();
      var endTime = playerdata.allplayers.filter(e => {
        if (e.Player_ID.includes(id)) {
          return e.End_Time;
        }
      });
      if (endTime.length != 0) {
        console.log(endTime);
      }
    });

【讨论】：