Dynamically set css class based on record data lwc

Question

I want to set the css class based on the record data for the specific card and not the same class for all the cards so I'm not able to make use of getter here, as there's no way I can pass record data with event.

Below is a small snippet of HTML:

<lightning-card title={objData.sName}>
                            <p class="slds-p-horizontal_small">
                                <lightning-badge label=""  data-id={objData.bIsOneActive}></lightning-badge>
                                <lightning-badge label=""  data-id={objData.bIsTwoActive} ></lightning-badge>
                                <lightning-badge label=""  data-id={objData.bIsThreeActive}></lightning-badge>
                            </p>
                            
                        </lightning-card>

The above lightning-card is inside of a grid's column, so I'll have 3 badges for each of the lightning card and depending on the value of bIsActive, I want to set the class for the respective lightning-badge (set class as active if it's true).

I tried below too , but it throws an error:

            let targetId = true;
            let badgeClass = this.template.querySelectorAll(`[data-id="${targetId}"]`);
            console.log('badgeClass : ' ,badgeClass);
            for(let i=0;i<this.badgeClass.length;i++){
                badgeClass[i].className = "active";
            }

the above throws an error on length of badgeClass,

So I also tried :

let targetId = true;
                let badgeClass = this.template.querySelectorAll(`[data-id="${targetId}"]`);
                console.log('badgeClass : ' ,badgeClass);
                for(let i=0;i<this.dataList.length;i++){
                    badgeClass[i].className = "active";
                }

I used the original dataList in above to get length, as the each of the record will have one value from bIsOneActive, bIsTwoActive, isThreeActive as true and therefore size of records returned by this.template.querySelectorAll([data-id="${targetId}"]) should be equal to original data list's length.

I have been scratching my head trying to find a way to implement this. Can someone please help me figure this out?

EDIT:

Updated code as per sfdcfox's advice:

if(result.length > 0){
                this.dataList = result;
                this.dataList.map((obj) => ({
                    ...obj,
                    sBadgeClass1: obj.bIsOneActive ? 'active' : '',
                    sBadgeClass2: obj.bIsTwoActive ? 'active' : '',
                    sBadgeClass3: obj.bIsThreeActive ? 'active' : '',
                    }));
                console.log('this.dataList : ' ,this.dataList);   
            } 

However, the console still shows the original data and the 3 new properties aren't added to the records.

Answer 1

this refers to a class variable. badgeClass is a local variable, so you do not use this.

for(let i = 0; badgeClass.length > i; i++) {

Note you can also use a forEach loop:

[...badgeClass].forEach(badge => badge.className = 'active');

I would recommend setting the value for the class name directly into your dataList elements, so you can directly refer to it in the template:

this.dataList = this.dataList.map((datum) => ({
...datum,
badgeClass1: datum.bIsOneActive ? 'active' : '',
badgeClass2: datum.bIsTwoActive ? 'active' : '',
badgeClass3: datum.bIsThreeActive ? 'active' : '',
}));