Printing data from an object within an object (JSON Parsing)-CodePudding

Im trying to parse an object within an object from this API documentation. I was able to parse through the main object, allowing to print the data that I need. Im confused on how im supposed to print within specific objects. For example, my loadPlayers() function, im trying to retrieve what team the specific player is on. I tried to reference the actual element (being "full_name") but I believe im not accessing the sub array correctly. Any information would be greatly appreciated! Link to api docs for players function: https://www.balldontlie.io/#players

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

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

        // loop all the players
        for (var player of playersData) {
            document.getElementById("players").innerHTML  = "<br />"   player["first_name"]   " "   player["last_name"]   ", "   player["position"]   ", "   player["full_name"];
        }      
      }
    };

    xhttp.open("GET", "https://www.balldontlie.io/api/v1/players", true);
    xhttp.send();

  }


  //Loads Game Data
  function loadGames() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        
        var games = JSON.parse(this.responseText);

        // get 'data' key inside response
        var gamesData = games.data;

        // loop all the games
        for (var game of gamesData) {
          //print score data 
            document.getElementById("games").innerHTML  = "<br />"   game["home_team_score"]   " - "   game["visitor_team_score"];
        }
      }
    };
    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) {
        

        var teams = JSON.parse(this.responseText);

        // get 'data' key inside response
        var teamsData = teams.data;

        // loop all the teams
        for (var team of teamsData) {
            // print full name and abbreivation
            document.getElementById("games").innerHTML  = "<br />"   team["full_name"]   ", "   team["abbreviation"]   ", "   team["conference"] ;
        }



      }
    };
    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：

Try this inside your loadPlayers function:

for (var player of playersData) {
 
            document.getElementById("players").innerHTML  = "<br />"   player["first_name"]   " "   player["last_name"]   ", "   player["position"]   ", "   player["full_name"]   " "   player.team.full_name;
        }

The team attribute inside each player is an object, so you have to refer like this: player.team.ATTRIBUTE_INSIDE_TEAM_OBJECT

CodePudding user response：

I can see from the response that the "full_name" you are trying to get is inside the team object. To get it you write player["team"]["full_name"]

CodePudding user response：

To get the team you can try: players.data[0].team.full_name

or in your loop: player.team.full_name

Until you get used to the tree view in your head try an online json beautifier: https://jsonbeautifier.org/