Error with itemData

Hi, I’m trying to link dynamically in a repeater based on the results of a queryReferenced dataset. However, I’m getting an error message that doesn’t make sense!
This is my code with the error message:


The same error message comes even outside of the event handler. It just doesn’t seem to like the hyphens, but that is the auto-generated field key.

Indeed, this is the correct field key!

Finally, in the console.log(results) of the queryReferenced, it is correct!

How can I fix this? Right now, I am using a workaround where I made another field and simply copy-and-paste the urls from the autogenerated field, but I would like to be able to fix this!!

Thanks

Perhaps it would be a better idea to use UNDERLINES instead of hyphen.

bad idea —> link-effects-title
good idea → link_effects_title
better idea —> linkEffectsTitle

@russian-dima I tried the last one (no spaces), I’ll try the underlines when I’m back on my computer thiugh thanks. The thing is, I copied and pasted the field key from the database!

@russian-dima I tried the last one (no spaces), I’ll try the underlines when I’m back on my computer thiugh thanks. The thing is, I copied and pasted the field key from the database!

@ajanistella I haven’t seen a repeater element function code done quite this way. I tried it, and it ended up firing for every row of the repeater, a behavior that one would seldom want.

Instead, see if putting the onClick function code outside the onItemReady function but still within the page onReady() and see if you still get the same “‘effects’ is not defined” error. Something like this if it’s a dataset that populates the repeater. If you get the same error, examine the console.log to be sure that the itemData object is returning what you think it is.

$w("#container2").onClick((event) => {
   let $item = $w.at(event.context);
   let itemData = $item("#dataset1").getCurrentItem();
   console.log(itemData);
   wixLocation.to(itemData.link-effects-title);
})

@tony-brunsman
You mentioned something, on which i have never paid attention (and perhaps made all the time an unknown misstake). I should pay more attention on this.

Hey @russian-dima , @ajanistella :raised_hand_with_fingers_splayed:

The best way is to access the property by using the array method, here’s how:

const obj = {
    'link-effect-title': 'https://......',
    name: 'Page Title'
}

You can access the properties of the object obj by two methods:

  1. The dot annotation method:
// To access the 'name' method
obj.name; // Page Title

// To access the 'link-effect-title'
obj.link-effect-title; // Error

To solve the issue in the first property, we use the array method.

  1. The Array method:
// To access the 'name' method
obj[name]; // Page Title

// To access the 'link-effect-title'
obj['link-effect-title']; // 'https://......'

Hope this helps~!
Ahmad

Yes that’s it! Your explanation was very good & useful.
My intention was to avoid/prevent such ids (property-names).

@russian-dima glad that it was helpful.
Don’t avoid them, just learn how to deal with them, and also, you still need the array method to access an object in many other scenarios, so it’s best to learn how rather than avoiding it.

@ajanistella

The thing is, I copied and pasted the field key from the database!
Can you show a screenshot from DB ?
Is this somehow related to → “dynamic pages” ?
If so, then i would understand this problematic scenario.

When creating dynamic pages, you also get such → “link - effects - title” property-names/IDs.

@ahmadnasriya
I am not avoiding the new knowledge you gave here in this post (i even already use it all the time) :sweat_smile: J.D. once told me the same, but not in detail.
I like to use the flexible “Array-Method”.

But what i always try to avoid are badly generated IDs —> like —> this-is-my-ID.
Instead i prefer to write them like —> thisIsMyID.

Advantage —> no issues with “dot annotation method” :grin:

And this was the reason, why i wrote this…

bad idea —> link-effects-title

good idea → link_effects_title

better idea —> linkEffectsTitle
But you gave me more light into the dark and now i am also able to explain it to myself, thanks!

But i assume that the current issue was caused, because of automatic generated IDs ----> like when you do use dynamic-pages.

Thank you @ahmadnasriya and @russian-dima ! I adapted what Ahmad said, and this is my working code:

wixData.queryReferenced("EffectsCategories", id, "newField", options)   .then( (results) => {
            $w('#repeater1').data = results.items;
            $w('#repeater2').data = results.items;
            console.log(results)
        })

        $w("#repeater1").onItemReady( ($item, itemData, index) => {
            $item("#text66").text = itemData.title
            $item("#image15").src = itemData.image
            $item('#text67').text = itemData.seoDescription
            $item('#button21').link = itemData.url
            $item("#container2").onClick( (event) => {
                wixLocation.to(itemData['link-effects-title'])

Thanks for all your help!!

@russian-dima Glad that my answers help you, and hopefully others too.
Yes, the issue was caused because the dynamic link field is generated with hyphens instead of using the Camel method.

You’re welcome, any time :wink: