Parsing JSON Array to print specific elements

Question

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>

倪任爾 · Accepted Answer · 2022-05-15 09:16:32Z

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();
}

Raja M · Accepted Answer · 2022-05-15 09:04:51Z

0

In function loadPlayers() data is an array not object

answered May 15, 2022 at 9:04

Raja M

161 bronze badge

Collectives™ on Stack Overflow

Parsing JSON Array to print specific elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related