Avoid an error when linking to dynamic pages in onItemReady()

(AKA dealing with hyphens in field keys)

A common use case for repeaters is placing them on an index page as a gateway to your dynamic item pages. Clicking a button in a specific repeater item leads the site visitor to the corresponding dynamic item page. For example, clicking a sushi recipe item in your repeater leads to the sushi recipe dynamic page.

If you are using code to connect your repeater to your dynamic page, you'll need to set the link for each repeater item button to the calculated dynamic page URL in your database collection.

We use the field key of the dynamic URL calculated field to set the button links.

So your onItemReady() function will look something like this:

 $w("#recipeRepeater").onItemReady(($item, itemData) => {
   $item("#recipeTitleText").text = itemData.title;
   $item("#recipeImage").src = itemData.image;
   $item("#recipeButton").link = itemData.link-recipes-title; // THIS WILL THROW AN ERROR
 });

Line 4 will throw an error because the field key has hyphens in it. Note that all calculated dynamic URLs contain hyphens.

What's the solution? Remove the period and surround the field key with square brackets and quotes.

 $w("#recipeRepeater").onItemReady(($item, itemData) => {
   $item("#recipeTitleText").text = itemData.title;
   $item("#recipeImage").src = itemData.image;
   $item("#recipeButton").link = itemData['link-recipes-title']; // THIS WILL WORK
 });