Assigning background color to hex code in a database

Ask the community
,
1

Hey guys!

I’m having trouble with this simple application. I followed these two posts ( Post 1 and Post 2 ) for direction and I can’t seem to understand the issue with my logic. Here’s my code:

$w.onReady(function () {
    $w('#brandAssets').onReady(() => {
        $w('#primaryColors').forEachItem(($w, data, index) => {
            $w('#primaryColorBG').style.backgroundColor = data.colors.primaryColor;
        });
    });
});

And I keep getting this error:
“An error occurred in one of datasetReady callbacks TypeError: Cannot read property ‘primaryColor’ of undefined”

I gave my elements the following IDs:

  • Dataset: brandAssets

  • Repeater: primaryColors

  • Container: primaryColorBG

And my databases are organized as follows:

  • Brand Assets

  • Colors [field key: colors] (field type: reference - Brand Colors database)

  • Brand Colors

  • Primary Color [field key: primaryColor] (field type: text - #00A4E0)

I have virtually no experience with coding so please excuse my ignorance. Any help will be appreciated.

Here’s a link to a reference page if it helps:
https://www.wegrowthe.co/brand-assets/Matthew-Talks

2

If you are going to copy a given code example, then please check it is okay and you use the right field names for your own site.

You are missing the line here in bold blue.
It also needs to be $i and not $w.
data.hex - hex is the field key of the field that the hex number is stored in.

$w.onReady(function () {
$w('#dataset1').onReady( () => {
$w('#myRepeater').onItemReady(() => { 
$w('#myRepeater').forEachItem(($i, data, i) => { 
$i('#myRepeaterContainer').style.backgroundColor = data.hex;
        });
    });
    });
});