Parsing JSON Array to print specific elements-CodePudding

Im currently trying to parse JSON data from this api in JS but im not sure how to. As of right now when I press any buttons to give me the data, it prints the arrays out rather than the specific data I want. Ive tried to use the JSON Parse function to retrieve the specific data but it seems its not working. Any help would be greatly appreciated! URL to the API docs: https://www.balldontlie.io/#get-all-players

//Loads Player Data
function loadPlayers() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("players").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/players", true);



    var data = JSON.parse(xhttp.responseText);

    console.log(data["last_name"])

    xhttp.send();

  }


  //Loads Game Data
  function loadGames() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("games").innerHTML =
        this.responseText;      
      }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/games", true);
    xhttp.send();
  }

  //Loads Team Data
  function loadTeams() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("teams").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/teams", true);
    xhttp.send();
  }

<!DOCTYPE html>
<html>
<body style="background-color:peachpuff;" >

<center>NBA STATS</center>
<center><marquee behavior="scroll" direction="right" scrollamount="12.5">Data Extracted From BDL API</marquee></center>
<center>    <a href="https://www.balldontlie.io/#introduction">View API Docs</a>   </center>

<script src="main.js"></script>
    
<div id="players">  
<button type="button" onclick="loadPlayers()">View Players</button>
</div>
   

<div id = "teams" >
<button type="button2" onclick="loadTeams()">View Teams</button>
</div>



<div id ="games">
<button type="button3" onclick="loadGames()">View Games</button>   
<div>
    





</body>
</html>

CodePudding user response：

In function loadPlayers() data is an array not object

CodePudding user response：

You should parse JSON in xhttp.onreadystatechange, that's a callback when request data success.
For the players data as example, it is an object with data and meta, and the players is in data key which is an Array, so you need to loop inside the array to print the values that you needed.

Here's the example for loadPlayers(). You can apply the same concept to loadGames and loadTeams, please let me know if you still having questions.

function loadPlayers() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // parse JSON after response
            var players = JSON.parse(this.responseText);

            // get 'data' key inside response
            var playersData = players.data;

            // loop all the players
            for (var player of playersData) {
                // print last_name to the #players element
                document.getElementById("players").innerHTML  = "<br />"   player['last_name'];
            }
        }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/players", true);
    xhttp.send();
}