Html 从数组中搜索Json键以匹配对象并将其推送到表中

我试图搜索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"
        }
    ]
}

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

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

我当前正在HTML中显示数组中的播放器ID，如下所示：

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

 <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

推送到表中，以便它们与相应的播放器ID一起显示

---

旁注：玩家ID的显示顺序无关紧要

如果我正确理解了你的问题，你是想在表上显示相应的

结束时间，对吗？在每个td列上，您可以将其绑定到各自的属性，
Player\u ID
和
End\u 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>


玩家ID
结束时间
{{player.player_ID}
{{player.End_Time}

我在这里做了一个解释。
JSON是用于数据交换的文本符号。一旦您解析了它并在代码中使用它，它就不再是JSON了。也就是说，如果您处理的是JavaScript源代码，而不是字符串，那么您就不是在处理JSON。我只想显示数组中播放器id所在的数据。所以它应该只显示3@JackU是的，我知道，你可以在生成的数组上使用相同的逻辑。我可以在表中显示数组，类似于你所做的，但是我如何过滤“JSON”以只获取数组中的结束时间？@JackU我已经更新了我的演示，使它只显示过滤后的数据。我还对您最初提供的代码进行了一些调整。你可以在
ngOnInit（）
上查阅它，至于你的另一个问题，你想实现什么？您只需要一个只包含
结束时间的数组
？
        {
        "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);
      }
    });