Change text color in a text box on a repeater using conditional statement

I am trying to display text color change in a text box based on conditional formatting in a repeater. I have queried my dataset based upon 4 possible options in a data field named “work”. I am able to capture the particular value for “work” based upon how a record is created, ie. “work” that needs to be done refinish, weld, straightening etc.

Based upon the query I extracted a record which is query results as an array. I have accessed the array value for “work” and I can console log the value for “work” and it works fine. From there I created if else if statements to format my text box in my repeater based upon the type of work that needs to be done.

What I found, though I am not really surprised is every time the format changes based upon the results of the query it changes all the format for existing records. Anyone have any suggestions. I know that the issue is a repeater text box isn’t unique to a record as it is unique to the repeater.

Here is my code:

import wixData from ‘wix-data’;

wixData.query(‘Orders’)

.contains(“work”, “Refinish”)

.or(

wixData.query(‘Orders’)

.contains(“work”, “Straightening”)

)

.or(

wixData.query(‘Orders’)

.contains(“work”, “Weld”)

)

.or(

wixData.query(‘Orders’)

.contains(“work”, “Weld & Straightening”)

)

.find()

.then((results) => {

if(results.items.length > 0) {

let items = results.items;

let a = items[0].work

if(a === “Refinish”) {

$w(“#text10”).html = ‘

’ + $w(“#text10”).text +‘

} else if(a === “Straightening”) {

$w(“#text10”).html = ‘

’ + $w(“#text12”).text +‘

} else if (a === “Weld”) {

$w(“#text10”).html = ‘

’ + $w(“#text13”).text +‘

} else if (a === “Weld & Straightening”){

$w(“#text10”).html = ‘

’ + $w(“#text14”).text +‘

}

console.log(a);

}

})

You need to use $w(repeater).onItemRedy() function, see here:
https://www.wix.com/corvid/reference/$w.Repeater.html#onItemReady
and use $item when you refer to an in-repeater element (see the linked example)

What I tried today. Console.log(itemData.work) prints out correctly but I can’t seem to understand how to correlate that with “#text10” to use it in my comparison statement.

$w(‘#repeater1’).onItemReady(($item, itemData, index) => {
//itemData.work = $item(“#text10”).text
$item(“#text10”).text = itemData.work
if(itemData.work === “Weld”){
$w(“#text10”).html = ‘

’ + $w(“#text10”).text + ‘


}
else if(itemData.work === “Straightening”) {
$w(“#text10”).html = ‘

’ + $w(“#text10”).text + ‘


}
else if (itemData.work === “Refinish”) {
$w(“#text10”).html = ‘

’ + $w(“#text10”).text + ‘


}
else if (itemData.work === “Weld & Straightening”) {
$w(“#text10”).html = ‘

’ + $w(“#text10”).text + ‘


}
console.log(itemData.work)
})
}
);

Figured it out using .onItemReady. Thanks for the help

I am trying to do the same thing but only with 2 conditions. It is to do with Properties, and I want properties sold or rented to show 'sold or ‘rented’ in red colour.
I don’t have any codes yet, I tried to use yours and change a bit. It did not work for me. I have a repeater1 and a status text23 connect to database field ‘status’. Please help me. I want text23 to turn red when its input is ‘Rented’ or ‘sold’

Thank you.