Javascript table change text colour depending on value

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

Blocker
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?

Directory
├─index.html
├─source.json

source.json

{
    "metadata": {
        "schema_version": "https://schemas.getdbt.com/dbt/sources/v3.json",
        "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"
        }
    ]
}

Index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <table class="table table-striped">
        <tr class="bg-info">
            <th>unique_id</th>
            <th>max_loaded_at</th>
            <th>snapshotted_at</th>
            <th>max_loaded_at_time_ago_in_s</th>
            <th>status</th>
        </tr>
        <tbody id="myTable">
        </tbody>
    </table>
    <script>
        // build table function
        function buildTable(data) {
            var table = document.getElementById('myTable')

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


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

                var source_data = []
                for (let i = 0; i < data.results.length; i++) {
                    source_data.push({
                        "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
                buildTable(source_data)

                // 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";
                    }
                };
            })
    </script>
</body>

</html>

>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