Использование JSON из веб-API

Question

Я пытаюсь взять данные из игры и отобразить их на веб-странице, как только веб-страница будет загружена. Это мой скрипт

$(document).ready(function() {
        $("#csgoStat").click(function() {
            $.ajax({
                url: "https://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=12A1D1DE83F9932934EDD6DF2BA00463&steamid=76561198010352479",
                type: 'GET',
                success: function(output) {
                    document.getElementById(""total_kills).innerHTML = output.totalKills;
                }
            });
        });
    });

Это пример JSON данных по ссылке выше

{"playerstats":{"steamID":"76561198010352479","gameName":"ValveTestApp260","stats":[{"name":"total_kills","value":18823},{"name":"total_deaths","value":17093},{"name":"total_time_played","value":1591942}]}}

Это мой код в теле моего HTML файла

    <div class="split left">
    <div class="centered">
        <h2>#Username Statistics</h2>
        <img src="myAvatar%20(1).png">

        <p id="totalKills">total kills</p>
        <p id="totalDeaths">total kills</p>
        <p id="totalTimePlayed">total kills</p>
    </div>
</div>

Вот как выглядит моя страница.

Мне, вероятно, не хватает большого количества кода, и я пытался понять это, плюс посмотрите для обучающих программ, но я изо всех сил пытаюсь понять, я немного новичок.

Спасибо

Answer 1

Обычно вам нужно будет сделать что-то вроде этого для каждого значения, которое вы хотите отобразить (в рамках функции «успеха»):

document.getElementById("totalKills").innerHTML = 
   output.playerstats.stats.filter(x => x.name === "total_kills")[0].value;

Это должно работать для нескольких свойств одновременно:

[  /* ID */            /* stat property name from the response data */
  ["totalKills",       "total_kills"],
  ["totalDeaths",      "total_deaths"],
  ["totalTimePlayed",  "total_time_played"],
].forEach(e => document.getElementById(e[0]).innerHTML = 
     output.playerstats.stats.filter(s => s.name === e[1])[0].value;
);

Демо:

$(document).ready(function () {
  $("#csgoStat").click(function () {
    $.ajax({
      url: "https://cors-anywhere.herokuapp.com/https://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=12A1D1DE83F9932934EDD6DF2BA00463&steamid=76561198010352479",
      type: "GET",
      success: function (output) {
        [
          ["totalKills", "total_kills"],
          ["totalDeaths", "total_deaths"],
          ["totalTimePlayed", "total_time_played"]
        ].forEach(e =>
            document.getElementById(e[0]).innerHTML = 
                output.playerstats.stats.filter(s => s.name === e[1])[0].value
        );
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="totalKills">total kills</p>
<p id="totalDeaths">total deaths</p>
<p id="totalTimePlayed">total time played</p>

<button id="csgoStat">LOAD STATS</button>