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

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

I want to be able to grab the Name (and in the future, other) values from within the offense, defense, and special teams arrays. I am assuming some sort of join needs to be written. Any help is appreciated.