My code includes an AJAX function that sends a GET request to an API and receives data in the format shown below:
{
"firstname": "John",
"lastname": "Doe",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d090208072d0a000c040041170e0200">[email protected]</a>",
"subjects": [
{
"id": 1,
"name": "maths"
},
{
"id": 2,
"name": "chemistry"
}
]
}
I'm trying to display this data in a table but I'm struggling with formatting the 'subjects' array correctly, specifically as a list within one cell of the table. I attempted to place the array data into a nested table within the main table, however, it's not rendering properly. It seems like there is an issue with my iteration loops.
function getPeople() {
$.ajax({
type: "GET",
url: "http://example.com",
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
// Populating a table with the JSON
$("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th><th>Subjects</th></tr>" );
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].subjects.length; j++) {
var subjects = data[i].subjects[j];
$("table.insidetable").append('<tr><td>' + subjects + 'tr><td>')
}
$("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable" + "</td></tr>");
}
},
error: function (jqXHR, status) {
// Error handler
console.log(jqXHR);
alert('fail' + status.code);
}
});
}