Scenario: I am currently working on a project where I need to fetch data from an external json file, parse it, and then dynamically add it to an HTML table using the footable jQuery plugin.
Question: I have a query regarding how to use JavaScript to parse this json data and based on the value of a specific name/value pair, display the text in a different color within the table. Currently, everything is being displayed in plain text.
The object COPD_QUAL.MED_ASSESS is crucial here as I want to style its display based on its value. For instance,
If COPD_QUAL.MED_ASSESS is "Mild exacerbation" - Display in green, bold text.
If COPD_QUAL.MED_ASSESS is "Moderate exacerbation" - Display in yellow, bold text.
If COPD_QUAL.MED_ASSESS is "Severe exacerbation" - Display in red, bold text.
I already have the code to append the data to the table. Can someone guide me on how to add conditional statements to achieve the above styling? Should I include these conditions within my createPatientTable function?
if (window.location.hostname == 'localhost') {
console.log('local');
$.ajax({
type : 'GET',
url : 'json/gtw_copd_mpage3.json',
dataType : 'json',
success : function(json) {
createPatientTable(json);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}else{
var getPatients = new XMLCclRequest();
getPatients.onreadystatechange = function () {
if (getPatients.readyState == 4 && getPatients.status == 200) {
var json = $.parseJSON(getPatients.responseText);
createPatientTable(json);
};
}
};
});
function createPatientTable(json) {
$.each(json.LIST, function(i, COPD_QUAL) {
$('.footable > tbody:last').append('<tr><td>' + COPD_QUAL.PATIENT + '</td><td>' + COPD_QUAL.FIN +'</td><td>' + COPD_QUAL.NURSE_UNIT + '</td><td>' + COPD_QUAL.ROOM + '</td><td>' + COPD_QUAL.BED +'</td><td>' + COPD_QUAL.ATTENDING_PHYS + '</td><td>' + COPD_QUAL.LENGTH_OF_STAY + '</td><td>' + COPD_QUAL.MED_ASSESS + '</td></tr>');
});
$('.footable').footable();
};
Here is a snippet of the json array present in the file:
{"COPD_QUAL":"15","LIST":[ {"PATIENT":"TEST, TRICKLE","FIN":"70100905","NURSE_UNIT":"TIC","ROOM":"C219","BED":"A","ATTENDING_PHYS":"LEVITEN , DANIEL L","LENGTH_OF_STAY":"161days 20:15:24","MED_ASSESS":"Mild exacerbation"}...