Conditional Styling of Map Results in Salesforce LWC Table

Question

I am trying to change the font color of a custom field values displayed in a table. This is based on a condition wherein if this custom field's value is less than a specific amount, it will display said value in red font.

I have no problem in displaying the correct values, but each time I try to attempt to style the values, nothing changes.

Note: computedValue is the variable assigned in Apex class to get the value of the custom field named Computed_Value__c

Below are some portions of the codes I have problem with:

html file:

<!-- body section in html-->
<tbody>
<template if:true={actualResults}>
    <template for:each={actualResults} for:item="keyValue">
        <tr key={keyValue.key}>
            <td scope="col" style={keyValue.styleColor}>
                <div>{keyValue.value.computedValue}</div>
            </td>
        </tr>   
    </template> 
</template>
</tbody> 

javascript file:

import getAllResult from '@salesforce/apex/SampleController.getAllResult';

export default class SampleLWC extends LightningElement {

@track actualResults = [];

//section in javascript

getAllResult()
    .then(result => {
        if (result) {
            let mapResult = [];
            
            var styleColor;    

            for (var key in result) {
                mapResult.push({ key: key, value: result[key] });
                        
            }
            this.actualResults = mapResult.map(e => {
                 let isLess = e.Computed_Value__c < 1000;
                 e.styleColor = isLess ? 'background-color:red' :'background- 
                 color:none';
                 return e;
            });
        }
    })
    .catch(error => {
        this.error = error;
    });
}     

Answer 1

It looks like you're declaring mapResult but not actually adding any objects to the array, nor adding the styleColor attribute to any of those objects:

Assuming your Apex is returning a List of records...

this.actualResults = [...result].map(e => {
   // You may have to "clone" each element in "result" array if you get an immutable error
   // let o = JSON.parse(JSON.stringify(e)); // replace e with o below
   let isLess = e.Computed_Value__c < 1000;
   e.styleColor = isLess ? 'background-color:red' : 'background-color:none';
   return e;
});

EDIT: Taking your current code all the way home You can replace the following:

if (result) {
...
}

With:

if (result) {
    //let result = [{Id:'00123',Computed_Value__c:1200}, {Id:'00124',Computed_Value__c:800}];
    this.actualResults = [...result].map(e => {
        let isLess = e.Computed_Value__c < 1000;
        e.styleColor = isLess ? 'background-color:red' : 'background-color:none';
        return e;
    });
}

And simplify your code by using the unique SF Id as the Key:

<tr key={keyValue.Id}>
    <td scope="col" style={keyValue.styleColor}>
        <div>{keyValue.computedValue}</div>
    </td>
</tr> 

Answer 2

Here is simplified version of code which works.

HTML:

<template>
    <tbody>
        <template if:true={actualResults}>
            <template for:each={actualResults} for:item="keyValue">
                <tr key={keyValue.key}>
                    <td scope="col" style={keyValue.styleColor}>
                        <div>{keyValue.Computed_Value__c}</div>
                    </td>
                </tr>
            </template>
        </template>
    </tbody>
</template>

JS:

import {LightningElement} from "lwc";

export default class App extends LightningElement {

    get actualResults() {

        let result = [{
            key: 1,
            Computed_Value__c: 1200
        }, {
            key: 2,
            Computed_Value__c: 800
        }]

        return result.map(e => {
            // You may have to "clone" each element in "result" array if you get an immutable error
            // let o = JSON.parse(JSON.stringify(e)); // replace e with o below
            let isLess = e.Computed_Value__c < 1000;
            e.styleColor = isLess ? 'background-color:red' : 'background-color:green';
            return e;
        });
    }
}

Result