How do I apply conditional formatting on the values of a JavaScript array?

Question

I have a JavaScript array with multiple values that I am trying to apply conditional formatting to.

Example of what I am trying to produce.

let teamData = [
    { teamName: 'AFC Bournemouth', GW34FIX: "TOT(H)", GW34: 0.6, GW35FIX: "LEI(H)", GW35: 0.74, GW36FIX: "MCI(A)", GW36: 0.80, GW37FIX: "SOU(H)", GW37: 0.75, GW38FIX: "EVE(A)", GW38: 0.99, AVG: "", FDR: 0.69 },
    { teamName: 'Arsenal', GW34FIX: "LEI(H)", GW34: 1.20, GW35FIX: "TOT(A)", GW35: 1.11, GW36FIX: "LIV(H)", GW36: 0.98, GW37FIX: "AVL(A)", GW37: 1.44, GW38FIX: "WAT(H)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'Aston Villa', GW34FIX: "MUN(H)", GW34: 0.51, GW35FIX: "CRY(H)", GW35: 1.00, GW36FIX: "EVE(A)", GW36: 0.86, GW37FIX: "ARS(H)", GW37: 0.75, GW38FIX: "WHU(A)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'Brighton & Hove Albion', GW34FIX: "LIV(H)", GW34: 0.94, GW35FIX: "MCI(H)", GW35: 0.85, GW36FIX: "SOU(A)", GW36: 0.71, GW37FIX: "NEW(H)", GW37: 1.09, GW38FIX: "BUR(A)", AVG: "", FDR: 0.69 },
    { teamName: 'Burnley', GW34FIX: "WHU(A)", GW34: 1.26, GW35FIX: "LIV(A)", GW35: 1.01, GW36FIX: "WOL(H)", GW36: 1.22, GW37FIX: "NOR(A)", GW37: 2.37, GW38FIX: "BHA(H)", GW38: 1.46, AVG: "", FDR: 0.69 },
    { teamName: 'Chelsea', GW34FIX: "CRY(A)", GW34: 1.39, GW35FIX: "SHU(A)", GW35: 1.14, GW36FIX: "NOR(H)", GW36: 2.14, GW37FIX: "LIV(A)", GW37: 0.97, GW38FIX: "WOL(H)", GW38: 0.97, AVG: "", FDR: 0.69 },
    { teamName: 'Crystal Palace', GW34FIX: "CHE(H)", GW34: 0.72, GW35FIX: "AVL(A)", GW35: 1.00, GW36FIX: "MUN(H)", GW36: 0.42, GW37FIX: "WOL(A)", GW37: 0.56, GW38FIX: "TOT(H)", GW38: 0.49, AVG: "", FDR: 0.69 },
    { teamName: 'Everton', GW34FIX: "SOU(H)", GW34: 0.96, GW35FIX: "WOL(A)", GW35: 1.08, GW36FIX: "AVL(H)", GW36: 1.16, GW37FIX: "SHU(A)", GW37: 0.75, GW38FIX: "BOU(H)", GW38: 1.01, AVG: "", FDR: 0.69 },
    { teamName: 'Leicester City', GW34FIX: "ARS(A)", GW34: 0.83, GW35FIX: "BOU(A)", GW35: 1.35, GW36FIX: "SHU(H)", GW36: 0.72, GW37FIX: "TOT(A)", GW37: 0.88, GW38FIX: "MUN(H)", GW38: 0.81, AVG: "", FDR: 0.69 },
    { teamName: 'Liverpool', GW34FIX: "BHA(A)", GW34: 1.06, GW35FIX: "BUR(H)", GW35: 0.99, GW36FIX: "ARS(A)", GW36: 1.03, GW37FIX: "CHE(H)", GW37: 1.03, GW38FIX: "NEW(A)", GW38: 1.34, AVG: "", FDR: 0.69 },
    { teamName: 'Manchester City', GW34FIX: "NEW(H)", GW34: 0.83, GW35FIX: "BHA(A)", GW35: 1.17, GW36FIX: "BOU(H)", GW36: 1.25, GW37FIX: "WAT(A)", GW37: "Update", GW38FIX: "NOR(H)", GW38: 2.51, AVG: "", FDR: 0.69 },
    { teamName: 'Manchester United', GW34FIX: "AVL(A)", GW34: 1.96, GW35FIX: "SOU(H)", GW35: 1.10, GW36FIX: "CRY(A)", GW36: 2.36, GW37FIX: "WAT(A)", GW37: "Update", GW38FIX: "LEI(A)", GW38: 1.24, AVG: "", FDR: 0.69 },
    { teamName: 'Newcastle United', GW34FIX: "MCI(A)", GW34: 1.20, GW35FIX: "WAT(A)", GW35: 1.34, GW36FIX: "TOT(H)", GW36: 0.70, GW37FIX: "BHA(A)", GW37: 0.92, GW38FIX: "LIV(H)", GW38: 0.75, AVG: "", FDR: 0.69 },
    { teamName: 'Norwich City', GW34FIX: "WAT(A)", GW34: 0.84, GW35FIX: "WHU(H)", GW35: 0.54, GW36FIX: "CHE(A)", GW36: 0.47, GW37FIX: "BUR(H)", GW37: 0.42, GW38FIX: "MCI(A)", GW38: 0.40, AVG: "", FDR: 0.69 },
    { teamName: 'Sheffield United', GW34FIX: "WOL(H)", GW34: 0.90, GW35FIX: "CHE(H)", GW35: 0.87, GW36FIX: "LEI(A)", GW36: 1.39, GW37FIX: "EVE(H)", GW37: 1.34, GW38FIX: "SOU(A)", GW38: 1.02, AVG: "", FDR: 0.69 },
    { teamName: 'Southampton', GW34FIX: "EVE(A)", GW34: 1.04, GW35FIX: "MUN(A)", GW35: 0.91, GW36FIX: "BHA(H)", GW36: 1.41, GW37FIX: "BOU(A)", GW37: 1.33, GW38FIX: "SHU(H)", GW38: 0.98, AVG: "", FDR: 0.69 },
    { teamName: 'Tottenham Hotspur', GW34FIX: "BOU(A)", GW34: 1.67, GW35FIX: "ARS(H)", GW35: 0.9, GW36FIX: "NEW(A)", GW36: 1.42, GW37FIX: "LEI(H)", GW37: 1.14, GW38FIX: "CRY(A)", GW38: 2.04, AVG: "", FDR: 0.69 },
    { teamName: 'Watford', GW34FIX: "NOR(H)", GW34: 1.19, GW35FIX: "NEW(H)", GW35: 0.75, GW36FIX: "WHU(A)", GW36: 0.86, GW37FIX: "MCI(H)", GW37: "Update", GW38FIX: "ARS(A)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'West Ham United', GW34FIX: "BUR(H)", GW34: 0.79, GW35FIX: "NOR(A)", GW35: 1.85, GW36FIX: "WAT(H)", GW36: 1.16, GW37FIX: "MUN(A)", GW37: "Update", GW38FIX: "AVL(H)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'Wolverhampton Wanderers', GW34FIX: "SHU(A)", GW34: 1.11, GW35FIX: "EVE(H)", GW35: 0.93, GW36FIX: "BUR(A)", GW36: 0.82, GW37FIX: "CRY(H)", GW37: 1.79, GW38FIX: "CHE(A)", GW38: 1.03, AVG: "", FDR: 0.69 }
];

I am trying to show the text of GW3XFIX and apply a background color based on the value of GW3X. The number of GW3X is a given rating based on an algorithm. I want to color grade the field based on the size of its number. If under 0.7, then dark red, if between 0.7 and 0.9 then red, if between 0.9 and 1.1 then grey, if between 1.1 and 1.3 then green, if above 1.3 then dark green.

This is how I am loading the HTML table.

function loadTableData(teamData) {
    const tableBody = document.getElementById('teamData');
    let dataHtml = '';

    for(let team of teamData) {
        dataHtml += `<tr><td>${team.teamName}</td><td>${team.GW34FIX}</td><td>${team.GW35FIX}</td><td>${team.GW36FIX}</td><td>${team.GW37FIX}</td><td>${team.GW38FIX}</td><td>${team.AVG}</td></tr>`;
   }
    
    tableBody.innerHTML = dataHtml;
}

Is there a way to do this? I have tried multiple methods but without success.

Answer 1

You're probably looking for something like this:

function loadTableData(teamData) {
    const tableBody = document.getELementById("teamData");

    teamData.forEach((team) => {
        let row = document.createElement("tr");

        Object.keys(team).forEach((key) => {
            if (key == "teamName") {
                let el = document.createElement("td");
                el.innerText = team[key];
                row.prepend(el);
            } else if (key.match(/^GW3\dFIX$/) != null) {
                let el = document.createElement("td");
                el.innerText = team[key];
                el.style.background = team[key.replace("FIX", "")];
                row.append(el);
            }
        });

        tableBody.append(row):
    });
}

Here we utilise Array.forEach which calls a function on each element in the array (in this case, each team). Instead of your method of appending strings, we're going to create nodes from within the JS (using document.createElement ), which makes things a little easier for us.

Next, we use Object.keys() which returns the keys of an object as an array, again allowing us to iterate over it using the wonderful Array.forEach . We test the key to see if it is teamName , which won't be guaranteed to be first, which is why the element we create for it is prepended to the row, so it will be at the start.

Otherwise, if it matches the regex of a team name ( /^GW3\dFIX$/ ), a new cell can be created, filled with the text content and colored using the same key, except with FIX removed.

All this is appended to the row, which is finally appended to the table!

Answer 2

Try this:

function color(value) {
  return value<0.7?"darkred":
         value<0.9?"red":
         value<1.1?"grey":
         value<1.3?"green":
         "darkgreen";
}

function loadTableData(teamData) {
  var columns=Object.keys(teamData[0]).filter(key=>key.includes("FIX")).map(key=>key.slice(0,key.length-3));
  var tableHTML="";
  tableHTML+="<table>";
  tableHTML+="<tr>";
  tableHTML+="<th>Team</th>";
  for(var i=0; i<columns.length; i++) {
    tableHTML+="<th>"+columns[i]+"</th>";
  }
  tableHTML+="</tr>";
  for(var t=0; t<teamData.length; t++) {
    tableHTML+="<tr>";
    tableHTML+="<td>"+teamData[t].teamName+"</td>";
    for(var c=0; c<columns.length; c++) {
      tableHTML+="<td bgcolor='"+color(teamData[t][columns[c]])+"'>"+teamData[t][columns[c]+"FIX"]+"</td>";
    }
    tableHTML+="</tr>";
  }
  tableHTML+="</table>";
  document.getElementById('teamData').innerHTML=tableHTML;
}

Assuming all objects have the same properties, it's safe to use any of them to extract pairs of data, so I've used teamData[0] to get an array of key-pairs, like so: Object.keys(teamData[0]) .
With that, I've filter ed out the keys that have "FIX" in their name: filter(key=>key.includes("FIX")) .
Then, I've mapped those keys, just without the "FIX" part: map(key=>key.slice(0,key.length-3)) .
We are left with an array of key-pair-name: columns .
The first loop (and lines before and after) creates the header for the table.
Then, we create a row for each team using index t , starting with teamName , and then looping through key-pairs, using key for bgcolor and key+"FIX" for value, using a color function that returns a color based on the key's value.
Note: you can change the colors to better fit your needs. "silver" is lighter than "gray", for example.
And, finally, we place the whole tableHTML in the teamData 's element's innerHTML .

This is what I got from it: