I am new to Javascript. Why is this code giving me the error: Cannot read properties of undefined (reading 'length')? I have tried to add the datasrc code before but it is not working. Does anyone else have an idea on how to fix it?
//implement css in this files
import './style.css';
//jquery already imported
import $ from 'jquery';
// ajax to load
// do table data binding here using data from variable resultArr
var myArray = []
$.ajax({
method:'GET',
url:'https://www.seetrustudio.com/data.php',
success:function(response){
myArray = response.data
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].date}</td>
<td>${data[i].weather}</td>
<td>${data[i].temperature}</td>
<td>${data[i].temp_unit}</td>
</tr>`
table.innerHTML += row
}
}`
There is the only one place in your code where length is used: data.length in for loop.
for (var i = 0; i < data.length; i++){
So, intepreter tells I cannot read length of undefined hence data is undefined, hence myArray and response.data is undefined and you should set a breakpoint on line
myArray = response.data
and see what is in the response, and why it's not contains the key data.
For me, I have not updated the API key for my app. When I have done so, The issue is resolved.