My code works if I just output it to the screen. But when I try to put the results into a table, the cell is filled in with Undefined. I think it has to do with a scoping issue but I can't seem to get it worked out. Can anyone help me understand the scoping involved here and where I am going wrong?
This is the one that doesn't work and gives the error:
var API_URL = 'https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/prod/hunt';
$(document).ready(function() {
$.ajax({
type: 'GET',
url: API_URL,
success: function(data) {
data.Items.forEach(function(huntItem) {
var table = document.getElementById("hunts");
let row = table.insertRow(1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);
let cell5 = row.insertCell(4);
let cell6 = row.insertCell(5);
cell1.innerHTML = huntItem.Name;
cell2.innerHTML = huntItem.l1h;
})
}
});
});
Here is the HTML:
<body>
<h1>Hunting Results:</h1>
<table id="hunts">
<tr>
<th>Player</th>
<th>Level 1</th>
<th>Level 2</th>
<th>Level 3</th>
<th>Level 4</th>
<th>Level 5</th>
</tr>
<div id="playerRow">
</div>
</table>
It was because I had a Name with a capital N. It should be named with a lowercase n.
cell1.innerHTML = huntItem.name;
cell2.innerHTML = huntItem.l1h;
This version works now! What a rookie mistake!