So I got pretty far in my quest to fill in values and such using JavaScript, but I'm a bit stuck. I'm pretty sure I'm referencing everything right, but my html table isn't outputting anything.
Basically I'm just trying to insert values from an JSON that an API retrieves out and then insert those values into a table using the double for-loop (outer loop that cycles through to find the perf_data and the inner loop to cycle through to find the values for each instance) to go through the JSON file, and depending upon those values, say if the value is above 7, change the color.
Using this 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:
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 question ultimately boils down to is if I'm using the double for-loop right to go through the JSON file? I feel like this is where the error might be, but it seems like I'm referencing the address of the JSON file right to a bunch of examples I've seen with simpler JSON referencing... Or could it be something else?
Thanks in advanced.
You missed a lot of properties in the way. This could work, but I don't know if it makes sense for the (unknown to us) problem you need to solve
for (var i = 0; i < responseObject.product[0].measurement.length; i++) {
if (responseObject.product[0].measurement[i].id === '222222') {
for (var x = 0; x < responseObject.product[0].measurement[i].perf_data.length; x++) {
newContent += '<td id = "part">'+changeColor(responseObject.product[0].measurement[i].perf_data[x].value)
+'</td>';
}
document.getElementById('content').innerHTML = newContent;
}
}