How to display all players names in the Ball Don't Lie API array

Question

I am doing one of my first projects using the Ball Don't lie API, trying to build my version of an ESPN landing page. I am using https://www.balldontlie.io/api/v1/players. I am using Javascript, I have been stuck for days trying to understand how to display the first and last name of all of the players on the landing page in HTML. I only know how to display one name if I use data.data[0]. I've tried .map, loops, it's just not clicking. I want to be able to display other stats in the array as well. Can anyone help?

This my Javascript code:

async function getPlayers() {
    const response = await fetch ('https://www.balldontlie.io/api/v1/players');
    const data = await response.json();
    const players = data.data;
    console.log(players);
    displayPlayer(players);


}

function displayPlayer(players) {

    const scores = document.getElementById('scores');
    scores.innerHTML = `
    
    ${players.first_name} ${players.last_name}`;

   
}

getPlayers()```


I had tried .map, I've tried loops, I am just not understanding what function is going to show the players. Maybe my orignal code doesn't make sense. I've tried watching Youtube and can't find anyone doing it in simple Javascript.

Answer 1

You can try this in your script and edit points 2. and 4. for better display of what you need to show

// 1. GET request using fetch()
fetch("https://www.balldontlie.io/api/v1/players")
  // Converting received data to JSON
  .then((response) => response.json())
  .then((json) => {
    
  // 2. Create a variable to store HTML table headers
    let li = `<tr><th>ID</th><th>first_name</th><th>height_feet</th><th>height_inches</th> <th>last_name</th><th>position</th><th>im lazy...</th></tr>`;

    // 3. Loop through each data and add a table row
    console-console.log(json.data);
    json.data.forEach((user) => {
      li += `<tr>
        <td>${user.id}</td>
        <td>${user.first_name} </td>
        <td>${user.height_feet}</td>
        <td>${user.height_inches}</td>
        <td>${user.last_name}</td>
        <td>${user.position}</td>
        <td>${user.team.id}</td>
        <td>${user.team.abbreviation}</td>
        <td>${user.team.city}</td>
        <td>${user.team.conference}</td>
        <td>${user.team.division}</td>
        <td>${user.team.full_name}</td>
        <td>${user.team.name}</td>
      </tr>`;
    });

    // 4. DOM Display result
    document.getElementById("users").innerHTML = li;
  });

And your html body part look like this

    <div>
      <!-- Table to display fetched user data -->
      <table id="users"></table>
    </div>