How do I print data to table rows from multiple arrays within a larger array retrieved from an API?

Question

I cannot think of the most apt way to phrase this question, so please forgive me if this description doesn't fully match the title. For context, I am working on an NFL database presentation site that I asked for help with a few days ago (How can I correctly print different contents of an array retrieved from an API using JavaScript?) and I am now wondering how I can pull some more complex array information from a different endpoint. Here is the relevant .js:

const depthCharts = "https://api.sportsdata.io/v3/nfl/scores/json/DepthCharts?key=";
const apiKey = "api key";
const testTable = document.getElementById("test-table");
const teamSelect = document.getElementById("team-select");

async function checkDepthCharts(){
    testTable.innerHTML = ""; //clears the table before a new one is written
    const response = await fetch(depthCharts + `${apiKey}`);

    var data = await response.json();

    console.log(data);
    
    for(let player of data) {
        let tr = document.createElement("tr");
        tr.innerHTML = player.teamSelect.Defense.Name; //this line does not work
        testTable.appendChild(tr);
    }
}

checkDepthCharts();

When I say "this line does not work" above I specifically get the result: Uncaught (in promise) ReferenceError: Defense is not defined

Each row printed should be a different player. I figured I could select a team's index within the API's depth chart array with the select element, but that may be wrong. The code above would only give the names of defensive players for the selected index, but this may prove my idea does not work. I want to print a row for every player on the selected team. Here is a bit of the HTML I am using to select the team:

    <select name="team-select" id="team-select">
        <option value="0">ARI</option>
        <option value="1">ATL</option>
        <option value="2">BAL</option>
        <!-- all the way to value 31, since there are 32 NFL teams -->
   </select>

Here is a snip of the data I am trying to print from (what console.log(data); shows):

0: {TeamID: 1, Offense: Array(30), Defense: Array(29), SpecialTeams: Array(4)}
1: {TeamID: 2, Offense: Array(28), Defense: Array(28), SpecialTeams: Array(4)}

Here's one of the player indices fully expanded:

0: //index denoting team
Defense: Array(29)
0: //first index in the array of defensive players
DepthChartID: 61
DepthOrder: 1
Name: "Darius Robinson"
PlayerID: 25299
Position: "LDE"
PositionCategory: "DEF"
TeamID: 1
Updated: "2024-06-03T22:39:14"

I want to be able to grab the Name and other values from within the offense, defense, and special teams arrays. Ideally, I would like to print table rows that have the players' names and positions. It should print every player on the team, whether they are on offense, defense, or special teams. I am assuming some sort of join needs to be written. Any help is appreciated.

I suppose the expected result that I am trying to achieve would change my html to look like this:

       <table id="test-table">     
            <tr>
                <th>Player</th>
                <th>Position</th>
            </tr>
            <tr>
                <td>Darius Robinson</td>
                <td>LDE</td>
            </tr>
            <tr>
                <td>Ben Stille</td>
                <td>LDE</td>
            </tr>
<!-- about 70 more rows containing offensive, defensive and special teams players -->
       </table>

Answer 1

If you want to print the first player name in the "offense" in the console, you may try the following:

 console.log(data[0].offsense[0].Name);