Javascript table change text colour depending on value

Fetching data using JavaScript from local json file, this data is then looped through to create a table to be displayed.

The objective is to change the colour of the values depending on the contents within the table cell. For column "status" if the text is a pass, warn or errir then change the colour to green, yellow or red respectively.

This colour changing feature does not work – how to resolve?



    "metadata": {
        "schema_version": "",
        "version": "1.2.0",
        "generated_at": "2023-02-10T11:50:28.750306Z",
        "invocation_id": "dasfsadfdsafsadfdsfdasfasd",
        "env": {}
    "results": [
            "unique_id": "aaaaaaa",
            "max_loaded_at": "2021-11-12T05:42:46+00:00",
            "snapshotted_at": "2023-02-10T11:50:24.719683+00:00",
            "max_loaded_at_time_ago_in_s": 39334058.719683,
            "status": "error"
            "unique_id": "bbbbbbbb",
            "max_loaded_at": "2023-01-16T14:48:04+00:00",
            "snapshotted_at": "2023-02-10T11:50:25.812389+00:00",
            "max_loaded_at_time_ago_in_s": 2149341.812389,
            "status": "pass"


<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=""
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <table class="table table-striped">
        <tr class="bg-info">
        <tbody id="myTable">
        // build table function
        function buildTable(data) {
            var table = document.getElementById('myTable')

            for (var i = 0; i < data.length; i++) {
                var row = `<tr>
                            <td id="status">${data[i].status}</td>
                table.innerHTML += row

        // fetch json
            .then(response => response.json())
            .then(data => {

                var source_data = []
                for (let i = 0; i < data.results.length; i++) {
                        "unique_id": data.results[i].unique_id,
                        "max_loaded_at": data.results[i].max_loaded_at,
                        "snapshotted_at": data.results[i].snapshotted_at,
                        "max_loaded_at_time_ago_in_s": data.results[i].max_loaded_at_time_ago_in_s,
                        "status": data.results[i].status

                // build table

                // colour function
                function f_color() {

                    if (document.getElementById('status').innerHTML == 'pass') {
                        document.getElementById('status').style.color = "Green";
                    else if (document.getElementById('status').innerHTML == 'warn') {
                        document.getElementById('status').style.color = "Yellow";
                    else if (document.getElementById('status').innerHTML == 'error') {
                        document.getElementById('status').style.color = "Red";


>Solution :

You can simply assign a class to the "status" cell"

<td class="status ${data[i].status}">${data[i].status}</td>

and configure .status.error, .status.warn etc in your css.

Note that id=status in your code is wrong because element ids must be unique.

Leave a Reply