Fetching data from API but no data are being displayed in html - html

Question

I'm trying to fetch a specific set of data from an API as shown in the code below. Fetching only the football home teams' name and displaying it into a table.
I am getting no errors but no data is being shown in my table.
xhr.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
//document.getElementById('text').innerHTML = this.responseText;
const obj = JSON.parse(this.responseText);
for (var i=0; i<obj.length; i++)
{
var row = $('<tr><td>' + obj.response[i].teams.home.name + '</td></tr>');
$('#myTable').append(row);
}
}
}
xhr.onerror = function()
{
console.log('Request Error');
}
xhr.send();
}
when doing console.log(obj)

Answer 1

you could do something like this
xhr.onreadystatechange = function()
{
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200)
{
//document.getElementById('text').innerHTML = this.responseText;
const obj = JSON.parse(xhr.responseText);
for (var i=0; i<obj.response.length; i++)
{
var row = $('<tr><td>' + obj.response[i].teams.home.name + '</td></tr>');
$('#myTable').append(row);
}
}
}
xhr.onerror = function()
{
console.log('Request Error');
}
xhr.send();