时间戳

首页 > 解决方案 > 从数组中搜索 Json 键以匹配对象并推送到表

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

在 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 的显示顺序无关紧要。

标签： htmlarraysangulartypescript

解决方案

如果我正确理解了您的问题，那么您正在尝试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>

我在这里做了一个快速演示。

推荐阅读