Javascript table change text colour depending on value - javascript

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>

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.

Related

How to display column headers in Y axis for a Datatable using HighCharts?

I am using Datatables and HighCharts. Please see my code below. I am not sure how to display this bar chart where Years are displayed in Y axis. I have added an image below to show how it looks like.
I am new to HighCharts, so I am not sure of all the functions. Thanks.
How can I get graph to show like this? I want years in Y axis. Thanks.
http://live.datatables.net/febayaxa/1/edit
$(document).ready(function() {
var table = $("#example1").DataTable();
var salary = getSalaries(table);
// Declare axis for the column graph
var axis = {
id: "salary",
min: 0,
title: {
text: "Number"
}
};
// Declare inital series with the values from the getSalaries function
var series = {
name: "Overall",
data: Object.values(salary)
};
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: Object.keys(salary)
},
yAxis: axis,
series: [series]
});
// On draw, get updated salaries and refresh axis and series
table.on("draw", function() {
salary = getSalaries(table);
myChart.axes[0].categories = Object.keys(salary);
myChart.series[0].setData(Object.values(salary));
});
});
function getSalaries(table) {
var salaryCounts = {};
var salary = {};
// Get the row indexes for the rows displayed under the current search
var indexes = table
.rows({ search: "applied" })
.indexes()
.toArray();
// For each row, extract the office and add the salary to the array
for (var i = 0; i < indexes.length; i++) {
var office = table.cell(indexes[i], 0).data();
if (salaryCounts[office] === undefined) {
salaryCounts[office] = [+table.cell(indexes[i], 1).data().replace(/[^0-9.]/g, "")];
}
else {
salaryCounts[office].push(+table.cell(indexes[i], 1).data().replace(/[^0-9.]/g, ""));
}
}
// Extract the office names that are present in the table
var keys = Object.keys(salaryCounts);
// For each office work out the average salary
for (var i = 0; i < keys.length; i++) {
var length = salaryCounts[keys[i]].length;
var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
salary[keys[i]] = total / length;
}
return salary;
};
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example1" class="display nowrap" width="100%"><thead>
<tr><th>Year</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th><th>2020</th><th>2021</th></tr></thead>
<tr ><td> Data</td><td>3,823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr></tbody>
</tbody></table>
I am going to assume you mean the x-axis (the horizontal axis) when you say that you want to use the years (from the table headings) from your DataTable for each bar's label in the chart.
You can access these table headings using the DataTables API and some jQuery.
Use this to get an array of table heading elements:
api.columns().header()
And then use $(element).html() to get the label (the year) from each heading.
There is a lot of code in your example in the question which does not appear to be relevant to the chart you want to create, so in the following example, I removed all of that. If it is needed, you can put it back.
$(document).ready(function() {
var tableData = [];
var tableCategories = []
var table = $("#example1").DataTable({
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
// get the seris data as an array of numbers from the table row data:
api.rows().data().toArray()[0].forEach(function(element, index) {
if (index > 0) {
tableData.push(parseFloat(element.replace(/,/g, '')));
}
});
// get the x-axis caregories from the table headings:
api.columns().header().toArray().forEach(function(element, index) {
if (index > 0) {
tableCategories.push($(element).html());
}
});
  
}
});
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: tableCategories
},
series: [{
data: tableData
}]
});
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example1" class="display nowrap" width="100%">
<thead>
<tr>
<th>Year</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
<th>2018</th>
<th>2019</th>
<th>2020</th>
<th>2021</th>
</tr>
</thead>
<tr>
<td> Data</td>
<td>3,823</td>
<td>3,823</td>
<td>3,954</td>
<td>3,959</td>
<td>3,955</td>
<td>3,956</td>
<td>3,843</td>
<td>3,699</td>
<td>3,472</td>
<td>3,551</td>
</tr>
</tbody>
</tbody>
</table>
The output looks like this:
If you do actually want the years labels to be displayed on the y-axis (with horizontal bars, instead of vertical bars) then you can change the chart type by changing this part of the chart...
chart: { type: "column" },
to this:
chart: { type: "bar" },

Table won't load

I can see the array in the console but it doesnt show up on the table i've tried alot of things and it just hasnt worked out and i've been trying to fix this for like 2 days
i think tobodyHtml doesnt get defined but i dont know how to fix it
document.addEventListener("DOMContentLoaded", function(event) {
function loadUsers(){
var userTbody=document.getElementById('user-tbody');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
var userJSON=this.responseText;
var usersArray=JSON.parse(userJSON);
console.log(usersArray);
var tobodyHtml="";
for(let index = 0; index < usersArray.lenght; index++) {
const user = usersArray[index];
tobodyHtml+="<tr><td>"+user.id+"</td><td>"+user.username+"</td><td>"+user.password+"</td><td>"+user.birthdate+"</td></tr>";
console.log(tobodyHtml);
}
userTbody.innerHTML=tobodyHtml;
}
};
xhttp.open("GET", "http://localhost:8279/users", true);
xhttp.send();
}
loadUsers();
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/trgames.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js" integrity="sha512-8cU710tp3iH9RniUh6fq5zJsGnjLzOWLWdZqBMLtqaoZUA6AWIE34lwMB3ipUNiTBP5jEZKY95SfbNnQ8cCKvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table id="user-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Password</th>
<th>Birthday</th>
</tr>
</thead>
<tbody id="user-tbody">
</tbody>
</table>
<script src="js/trgames.js"></script>
</body>
</html>
I've had a similar issue before and I find that when creating HTML elements in JavaScript, it's best to use dom document.createElement to create the elements then add the inner text. Then you can append the final data into the body. Here's a simplified version of your code without the HTTP request since I don't have that data handy. There were also a few minor typos in your for loop (length) and some other issues that I cleaned up.
// grab refs to our html elements
const userTbody = document.getElementById("user-tbody");
const tr = document.createElement("tr");
// test data
const usersArray = [
{
id: 23,
username: "Joe",
password: "123",
birthdate: "01/01/2018"
}
];
// event on dom content loaded
document.addEventListener("DOMContentLoaded", function(event) {
// loop through data of users
usersArray.forEach((user) => {
// simple pattern to create the td and place the data on it
const userIdData = document.createElement("td")
userIdData.innerText = user.id
const userNameData = document.createElement("td")
userNameData.innerText = user.username;
const userPasswordData = document.createElement("td")
userPasswordData.innerText = user.password
const userBirthdateData = document.createElement("td")
userBirthdateData.innerText = user.birthdate
// append all of the data we created to the tbody
userTbody.append(
userIdData,
userNameData,
userPasswordData,
userBirthdateData
);
})
})
Here's a codepen example

POST request not posting the value of one property Javascript/jQuery

I am playing with jQuery and Javascript. Working on a TODOs app using li items and with this API: https://jsonplaceholder.typicode.com/todos. I receive 200 items from this API.
I am trying to post a new item created with a click from the button (btn-add) and everything works as expected, with the exception that the post request is leaving in blank one property which is "title". Here is my HTML and JS code:
<!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">
<link href="/CSS/styles.css" rel="stylesheet">
<title>TO DO List</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/JS/index.js"></script>
</head>
<body>
<div id="inputDIV">
<input id="input" type="text" placeholder="Enter new item">
</div>
<div id="buttons">
<button id="btn-add">Add List Item</button>
<button id="btn-update">Update First Item</button>
<button id="btn-delete">Delete First Item</button>
</div>
<div id="ulDIV">
<ul id="list">
<!-- Here we will insert the list items via JS-->
</ul>
</div>
</body>
</html>
$(document).ready(function(){
let inputNew = $('#input');
let list = $('#list');
let currentInputValue = "";
$('#btn-add').click(createTODOItemAtBackend);
inputNew.on({
"input": function(e){
console.log(e.target.value);
currentInputValue = e.target.value;
},
"keyup": function(e){
if(e.keyCode === 13){
createTODOItemAtBackend();
}
}
})
getTODOListFromBackend();
function clearInputData(){
inputNew.val("");
currentInputValue = "";
}
function createTODODynamically(id, title){
let newListElement = document.createElement("li");
let textNode = document.createTextNode(title);
newListElement.appendChild(textNode);
newListElement.id = id;
return newListElement;
}
function getTODOListFromBackend(){
$.get("https://jsonplaceholder.typicode.com/todos", function(data, status){
let response = data;
for(let i=0; i < response.length; i++){
list.append(createTODODynamically(response[i].id, response[i].title));
}
});
}
let obj = {
"userId": 1,
"title": currentInputValue,
"completed": false
};
function createTODOItemAtBackend(){
$.post("https://jsonplaceholder.typicode.com/todos", obj, function(data, status){
let response = data;
list.append(createTODODynamically(response.id, currentInputValue));
console.log("Item Added to the list!");
clearInputData();
});
}
})
And this is what I see when I read the post information in the web browser:
{userId: "1", title: "", completed: "false", id: 201}
completed: "false"
id: 201
title: ""
userId: "1"
Can somebody help me, why is the property "title" being posted as empty? Thanks in advance
The answer is in what #epascarello hinted on the OP's comment. You set currentInputValue when the input value is changed but there's no code which updates this value to obj.
"input": function(e){
console.log(e.target.value);
currentInputValue = e.target.value;
//Add this line
obj.title = e.target.value;
},
Additional note: You really don't need currentInputValue if you refactor your code, using obj should do the job.

How to create a bootstrap list group with two arrays?

I'm currently creating a dashboard and I want to create a "Bootstrap List Group" which should show a list of friends of the current dashboard.
I have given to arrays like this:
friendsID[id1, id2, id3]
friendsName[name1, name2, name3]
I want to create a method in javascript so that the result looks like this.
<div class="list-group">
name1
name2
name3
</div>
Would love to here how you would manage this because I am a little bit desperate and have no clue how to do this.
Here You can use document.write() to solve the problem it is used when the path for the html is not needed
var friendsID = ['id1','id2','id3'];
var i=0;
var friendName = ['name1','name2','name3'];
console.log(friendName[2]);
idplace();
function idplace(){
for(i=0;i<friendsID.length;i++)
{
document.write("<a href='/dashboard/"+friendsID[i]+"' class='list-group-item list-group-item-action'>"+friendName[i]+"</a><br>")
}
}
<!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="style.css">
</head>
<body>
<script src="./java.js"></script>
</body>
</html>
Or You can Use Innerhtml in this the path inside which div the html must be kept is determined by the programmer.
var friendsID = ['id1','id2','id3'];
var i=0;
var statement =[0,0,0];
var friendName = ['name1','name2','name3'];
console.log(friendName[2]);
idplace();
function idplace(){
for(i=0;i<friendsID.length;i++)
{
statement[i]="<a href='google.com/"+friendsID[i]+"'>"+friendName[i]+"</a><br>";
console.log(statement[i]);
document.getElementById("hello").innerHTML+=statement[i];
}
}
<!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="style.css">
</head>
<body>
<div id="hello"></div>
<script src="./java.js"></script>
</body>
</html>
You can do something like this
const friendsID = ["id1", "id2", "id3"]
const friendsName = ["name1", "name2", "name3"]
let i = 0;
for (i = 0; i < friendsID.length; i++) {
let list = '' + friendsName[i] + ""
$(".list-group").append(list)
}
<div class="list-group">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
check this out
https://jsfiddle.net/cloud_zero/hacLpe3g/4/
var arry1 = ["name1", "name2", "name3"];
var arry2 = ["id1", "id2", "id3"];
// merging two array
var result = arry1.reduce(function(acc, cur, index) {
return Object.assign(acc, { [arry2[index]]: cur })
}, {})
// generating links
var text = Object.keys(result).map(function(key) {
return `${ result[key] }`;
});
// finally adding to dom
document.querySelector('.list-group').innerHTML = text.join('');
first i merged two array to object (result)
then i generate links from the result
lastly linked added to DOM
First of all thank you for your great solutions!
I also tried my best and came up with this here.
var friendsIDs = ["id1", "id2", "id3"];
var friendsNames = ["name1", "name2", "name3"];
var friendLinks = [];
for (i=0; i < friendsIDs.length; i++){
friendLinks.push("<a href=/dashboard/" + friendsIDs[i] + " class=\'list-group item list-group-item-action\' >" + friendsNames[i] + "</a>")
}
//Create HTML Element for the Company Relations
var linkTarget = document.getElementById('linkTarget');
for(i=0; i < friendLinks.length; i++){
linkTarget.innerHTML += friendLinks[i];
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group" id="linkTarget"></div>

dynamically created td change onclick

I have a a table which has dynamic td's i want to change the weight of letters when clicked. following is my coding but it changes the whole page when clicked. Please tell me where I got it wrong.
function addHandler()
{
var addH=document.getElementsByTagName('td');
for( var i=0;i < addH.length;i++)
{
if(addH[i].addEventListener)
{
addH[i].addEventListener('click',addBold,false);
}
else if(addH[i].attachEvent)
{
addH[i].attachEvent('onclick',addBold);
}
}
}
function addBold()
{
var add=document.getElementsByTagName('td');
for( var i=0;i < add.length;i++)
{
var weightVal=add[i].style.fontWeight;
if(weightVal!=900)
{
add[i].style.fontWeight="900";
}
else
{
add[i].style.fontWeight="100";
}
}
}
Your addBold routine is setting ALL td's. The following works. I wish I could give you a reference link, but I can't. I want that link myself.
[edit] This page works like I think you want it to. Does it work for you?
The "e" gets passed to the event handler. I wish I could say more.
Like I said, I'm looking for a reference on how this works. But it does.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
function addHandler() {
var addH=document.getElementsByTagName('td');
for( var i=0;i < addH.length;i++) {
if(addH[i].addEventListener) {
addH[i].addEventListener('click',addBold,false); }
else if(addH[i].attachEvent) {
addH[i].attachEvent('onclick',addBold); } }
}
function addBold(e) {
if (e.target.style.fontWeight != "900") {
e.target.style.fontWeight = "900"; }
else {
e.target.style.fontWeight = "100"; }
}
</script>
</head>
<body onload="addHandler();">
<div id="bodyid">
<table border="1">
<tr><td>One1</td><td>Two1</td></tr>
<tr><td>One2</td><td>Two2</td></tr>
</table>
</div><!-- bodyid -->
</body>
</html>

Categories

Resources