Scenario: I am taking data from an external json file, parsing it, and then appending it to an HTML table that is using the footable jquery plug-in.
Question: This is a total noob question......but does anyone know (or could provide an example of) how to use javascript to parse that json file....and depending on the value of one of the name/value pairs, display that text in a different color within the table? Currently, everything is displaying in plain text.
COPD_QUAL.MED_ASSESS is the object that I would like to display differently depending on the value. So I would need something like....
if COPD_QUAL.MED_ASSESS == "Mild exacerbation"......display in green, bold text
if COPD_QUAL.MED_ASSESS == "Moderate exacerbation"......display in yellow, bold text
if COPD_QUAL.MED_ASSESS == "Severe exacerbation"......display in red, bold text
Below is the way I currently have the data appending the table. Can anyone help with incorporating an if / condition to accomplish the above? Do I need to add it 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 one of the json arrays within 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"}...
Can you not just add an if condition that attaches a class to the appropriate row:
var class = '';
if(COPD_QUAL.MED_ASSESS == "Mild exacerbation"){
class = 'mild';
} else if (COPD_QUAL.MED_ASSESS == "Moderate exacerbation") {
class = 'moderate';
} else if (COPD_QUAL.MED_ASSESS == "??? exacerbation") {
class = 'severe';
}
then change your tr to:
"<tr class="' + class + '">...
And set up the styling for .mild, .moderate, .severe in a CSS file.
My suggestion would be something like this:
/* ... */
+ '</td><td>' + COPD_QUAL.LENGTH_OF_STAY +
'</td><td class="assessment ' + getSeverity(COPD_QUAL.MED_ASSESS) + '">' +
COPD_QUAL.MED_ASSESS + '</td></tr>')
with
getSeverity = (function() {
var lookup = {
"Mild exacerbation": "mild",
"Moderate exacerbation": "moderate",
"Severe exacerbation": "severe" // presumably you didn't mean two milds...
};
var defaultValue = "unknown"
return function(assessment) {
return lookup[assessment] || defaultValue;
};
}());
and CSS like:
.assessment {font-weight: bold;}
.mild {color: green;}
.moderate {color: yellow;}
.severe {color: red;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.