Соответствие ключу / значению в объекте JSON

Question

У меня есть школьный проект, в котором мы учим JSON.Я пытаюсь выяснить, как сопоставить ключи с другими ключами, существующими в другом свойстве объекта.

Я использую старый API для получения информации об игроке NFL.Вот пример URL для извлечения данных:

http://api.fantasy.nfl.com/v1/players/stats?statType=seasonStats&season=2018&week=16&format=json

Я использую AJAX для вызова данных и преобразования результатов в таблицу.

  $.ajax({
   url: queryURL,
   method: "GET"
   }).then(function(response) {
     var tbl = $("<table>");
     $(tbl).addClass("table");
    var objCount = JSON.stringify(response.players.length);

    $(tbl).append("<thead><tr><th>ID</th><th>Team</th><th>POS</th> 
    <th>Player</th><th>Stat</th></tr></thead><tbody>");


    for (p = 1; p < 2; p++) {
      var id = response.players[p].id;
      var team = response.players[p].teamAbbr;
      var pos = response.players[p].position;
      var plyr = response.players[p].name;
      var stat = JSON.stringify(response.players[p].stats);
      var plyrStatsObjLen = 
        JSON.stringify(response.players[p].stats.length);
  console.log("statObjLength: " + plyrStatsObjLen);

       $.each(response.players[p].stats, function(key, value) {
         console.log(key + ": " + value);
  });

  $(tbl).append("<tr><td>" + id + "</td><td>" + team + "</td><td>" + pos + "</td><td>" + plyr + "</td><td>" + stat + "</td>");

}
$(tbl).append("</tbody><br/><br/>");
$("#statOutput").append(tbl);

});

Вот скрипка того, что я делаю: https://jsfiddle.net/kenneth2k1/kcf5duLr/

Если вы заметили результаты, у меня есть свойство stats, выделенное в его собственном столбце, но оно все еще находится в ключе / значении объектасостав.

Теперь вот еще один URL, в котором указана каждая статистика: https://api.fantasy.nfl.com/v1/game/stats?format=json

"stats": [
{
"id": 1,
"abbr": "GP",
"name": "Games Played",
"shortName": "GP"
},
{
"id": 2,
"abbr": "Att",
"name": "Passing Attempts",
"shortName": "Pass Att"
},
{
"id": 3,
"abbr": "Comp",
"name": "Passing Completions",
"shortName": "Pass Comp"
}, ... and so on

Так, например, идентификатор ключа "1" соответствует "Играм в играх" из эталонного объекта статистики.,

Я новичок во всем этом, поэтому я не могу обернуть голову, если я захочу подставить ключи в моем выводе с соответствующим значением имени из ссылочного объекта stats, как бы я это сделал?тот?

Например, из вывода jsfiddle вместо

{"1":"9","13":"1"}

Было бы сказано:

Games Played: 9, Rushing Attempts: 1

Надеюсь, это имеет смысл.В основном я хотел бы узнать, как сопоставлять ключи в одном объекте JSON со значениями ключей в другом.

Большое спасибо за помощь.

Answer 1

Вы можете вложить свой второй AJAX-вызов в функцию успеха вашего первого вызова, а затем поместить свои переменные и создание таблицы во вторую функцию успеха.Во второй функции успеха вы будете использовать простые циклы for, чтобы сопоставить каждую числовую статистику из данных игрока с правильным именем статистики в статистических данных, например:

$(document).ready(function () {

  var statType = "seasonStats";
  var season = "2018";
  var week = "15";

  var playersURL = "https://api.fantasy.nfl.com/v1/players/stats?format=json" + "&statType=" + statType + "&season=" + season + "&week=" + week;
  var statURL = "https://api.fantasy.nfl.com/v1/game/stats?format=json";

  // Now we get the stats
  $.ajax({
    url: statURL,
    method: "GET",
    success: function (response) {
      const stats = response.stats;

      // Then we get the players
      $.ajax({
        url: playersURL,
        method: "GET",
        success: function (response) {
          const players = response.players;

          // Now we do the rest of the logic

          // Here's our table creation and header
          var tbl = $("<table>");
          $(tbl).addClass("table");
          $(tbl).append("<thead><tr><th>ID</th><th>Team</th><th>POS</th><th>Player</th><th>Stat</th></tr></thead><tbody>");

          // Here's where we create variables for each individual player
          for (p = 0; p < 1; p++) {
            let id = players[p].id;
            let team = players[p].teamAbbr;
            let pos = players[p].position;
            let plyr = players[p].name;
            // We create an empty object to hold the named statistics we're about to find
            let statistics = {};

            // Now we'll loop over the players and statistics to get names for all the stats
            playerStats = players[p].stats;
            for (playerStat in playerStats) {
              for (s = 0; s < stats.length; s++) {
                // if the player's statistic matches the id of the property from the stats object, we add that stat name and its total for that player as a property of the object we created above
                if (playerStat === JSON.stringify(stats[s].id)) {
                  let statName = stats[s].name;
                  let statCount = playerStats[playerStat];
                  statistics[statName] = statCount;
                }
              }
            };
            // Now we turn our statistics object into text that can actually go into our table
            let prettyStats = "";
            for (statistic in statistics) {
              prettyStats = prettyStats + `${statistic}: ${statistics[statistic]}
              `
            }

            // Now that we have data for the player, we add a row to our table
            $(tbl).append("<tr><td>" + id + "</td><td>" + team + "</td><td>" + pos + "</td><td>" + plyr + "</td><td>" + prettyStats + "</td>");
          }

          //Here's the bottom of our table and its creation inside the div
          $(tbl).append("</tbody><br/><br/>");
          $("#statOutput").append(tbl);
        }

      });

    }
  });
});

Вы будетеВозможно, вы захотите выполнить дальнейшее форматирование текста на выходе prettyStats, но при этом вы получите данные, которые вы ищете.