Поиск ключей Json на предмет соответствия объекта из массива и отправки в таблицу - PullRequest
Новая
       18

Поиск ключей Json на предмет соответствия объекта из массива и отправки в таблицу

0 голосов
/ 08 мая 2019

Я пытаюсь найти 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 есть другие данные для других игроков, которые я не хочу отображать, потому что их идентификатор отсутствует в массиве.

В настоящее время я отображаю идентификаторы Player_ID из массива в HTML следующим образом: 

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

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Если я правильно понимаю ваш вопрос, вы пытаетесь показать соответствующий 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>

Я сделал быстрое демо здесь.

0 голосов
/ 08 мая 2019 
        {
        "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);
      }
    });
...