Home » Javascript » Displaying a JSON value in a table in a particular color (red or green) based on conditions in Javascript

Displaying a JSON value in a table in a particular color (red or green) based on conditions in Javascript

Posted by: admin August 19, 2018 Leave a comment

Questions:

I have a JSON message that needs to be displayed in a table format as follows. I am trying to display MARKS, PERCENATGE, RESULT columns in different colors based on values. Anything below 40% is Fail and so marks, percentage and result values for Rick will be displayed in Red color where as for rest of students those three columns should be in green color.

Required table:

NAME     SEX    MARKS   PERCENTAGE   RESULT
Rick      M    32/100      32          F
Rose      F    43/45       95.96       P
Alex      M    54/75       72          P
Adam      M    88/96       91.67       P

JSON message:

[{"NAME":"Rick","SEX":"M","MARKS":"32/100","PERCENTAGE":"32%","RESULT":"F"},{"NAME":"Rose","SEX":"F","MARKS":"43/45","PERCENTAGE":"95.56%","RESULT":"P"},{"NAME":"Alex","SEX":"M","MARKS":"54/75","PERCENTAGE":"72%","RESULT":"P"},{"NAME":"Adam","SEX":"M","MARKS":"88/96","PERCENTAGE":"91.67%","RESULT":"P"}]

I have already written the following code which displays the data in a table format.

<!DOCTYPE html>
<html>
<head>
    <title>Spring Session Report</title>
    <style>
        table, th, td 
        {
            margin:10px 0;
            border:solid 1px #333;
            padding:2px 4px;
            font:15px Verdana;
            text-align: center;
        }
        th {
            font-weight:bold;
            background-color:#b1babf;
            color: black; 
            font-size: 15px;
            text-align: center;
            margin: auto;
            padding: 8px;
            height: 5px;
            width: 20%;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Generate Semester Report" />
    <div id="showData"></div>
</body>

<script>
    function CreateTableFromJSON() {

    var myBooks = [{"NAME":"Rick","SEX":"M","MARKS":"32/100","PERCENTAGE":"32%","RESULT":"F"},{"NAME":"Rose","SEX":"F","MARKS":"43/45","PERCENTAGE":"95.56%","RESULT":"P"},{"NAME":"Alex","SEX":"M","MARKS":"54/75","PERCENTAGE":"72%","RESULT":"P"},{"NAME":"Adam","SEX":"M","MARKS":"88/96","PERCENTAGE":"91.67%","RESULT":"P"}]

        var col = [];
        for (var i = 0; i < myReport.length; i++) {
            for (var key in myReport[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        var table = document.createElement("table");

        var tr = table.insertRow(-1);                 

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");     
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        for (var i = 0; i < myReport.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myReport[i][col[j]];
            }
        }

        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

 }
</script>
</html>

I know that the color of the MARKS, PERCENTAGE, RESULT columns needs to be done with CSS but I am not sure how to achieve it. Or is there a better way to do it? Can anyone help in this regard?

Answers: