[SOLVED] Error with itemData

Question

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

Ahmad · Accepted Answer

Hey @russian-dima, @ClimateActivist 🖐  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.  2. 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

Ahmad · Answer

@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.

Code-Ninja · Answer

@Ahmad

I am not avoiding the new knowledge you gave here in this post (i even already use it all the time) 😅 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" 😁

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.

Ahmad · Answer

@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.

AS · Answer

Thank you @Ahmad 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!!

Error with itemData

How can we make the product better?