I'm currently working with JSON data in the form of an array, and I'm facing some issues. Here's how the data looks:
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5a69c9b96908790b59485879c99db97c8">[email protected]</a>",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d380bbb2bdbdb293beb6bfbaa0a0b2fda7a5">[email protected]</a>",
}
]
To fetch and display this data using AJAX, I'm using a function where I parse the JSON object from a string. I first initialize an XMLHttpRequest object:
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var jsonObj = JSON.parse(xhttp.responseText);
Next, I add a new element to the document:
var table='<tr><th>Name</th><th>Email</th></tr>';
table += '<tr><td>' +
jsonObj["name"] +
'</td><td>' +
jsonObj["email"] +
'</td></tr>'
document.getElementById('demo').innerHTML = table;
}
};
Despite my efforts, the browser isn't displaying the values in the table field as expected - instead, it shows undefined. I've tried changing to JSON.stringify(), but the issue persists. Can someone help me identify what might be wrong here?