I am currently in the process of eliminating the Jquery dependency from a project and reworking some code.
var request = new XMLHttpRequest();
request.open('GET', 'data.php', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.response);
if(!Object.keys(data).length) {
document.getElementById('MOStatus').innerHTML = 'No';
}
else {
document.getElementById('MOStatus').innerHTML = data.length;
$redwarnings = 0;
$amberwarnings = 0;
$yellowwarnings = 0;
for (var warningLevel in data) {
switch(data[warningLevel]) {
case "yellow":
$yellowwarnings++;
warningColor = '#FFE923';
break;
case "amber":
$amberwarnings++;
warningColor = '#ff9900';
break;
case "red":
$redwarnings++;
warningColor = '#cc0033';
break;
default:
break;
}
}
} //Closes the else that comes into play if array is not empty.
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
Despite correctly calculating the length of the data, my revised code does not seem to efficiently loop through and tally the red, yellow, and amber warnings.
I believe the issue lies in how I am referencing keys/values within JavaScript - unlike the JQuery-dependent code where this.warningLevel functions as intended, it does not operate properly in the non-JQuery version.