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.