After making good progress in using JavaScript to fill in values, I've hit a roadblock. Despite checking my references, my html table isn't displaying any output.
The goal is simple - extract values from a JSON retrieved by an API and insert them into a table. Using a double for-loop (outer loop to find the perf_data and inner loop to fetch individual values) to cycle through the JSON data, I aim to change the color based on specific conditions (e.g., if value is above 7).
This is the sample JSON file:
{
"product" : [ {
"name" : "TxP",
"id" : "TxP",
"measurement" : [ {
"id" : "222222",
"alias" : "Site Login",
"perf_data" : [ {
"name" : "last_five_minute",
"value" : "4.908",
"duration" : "300",
"unit" : "seconds"
}, {
"name" : "last_fifteen_minute",
"value" : "3.99",
"duration" : "900",
"unit" : "seconds"
} ],
"avail_data" : [ {
"name" : "last_five_minute",
"value" : "100",
"duration" : "300",
"unit" : "percent"
}, {
"name" : "last_fifteen_minute",
"value" : "100",
"duration" : "900",
"unit" : "percent"
}, {
...
The .js file involved:
var jsonData = new XMLHttpRequest();
var url = "---";
function changeColor(input, value){
if (value < 7) {
$(input).removeClass();
$(input).addClass('high');
}
}
jsonData.onload = funtion() {
if (jsonData.status === 200){
responseObject = JSON.parse(jsonData,responseText);
var newContent = '';
for (var i = 0; i < responseObject.perf_data.length; i++) {
if (measurement.id === '222222') {
for (var x = 0; x < responseObject.value.length; x++) {
newContent += '<td id = "part">'+changeColor(responseObject.value[x])
+'</td>';
}
document.getElementById('content').innerHTML = newContent;
}
}
}
};
jsonData.open("GET",url,true);
jsonData.send();
My query centers around whether I'm correctly utilizing the double for-loop to navigate through the JSON file? While it seems like I'm following examples of simpler JSON referencing, could there be another reason behind the error?
Appreciate your help in advance.