Queens Market - can you post the page link that you are having a problem with? You have only showed a small segment of the data collection which doesn’t help with addressing your problem.
My earlier post mistakenly reflected what I saw on russian-dima’s mock up (apologies I mis read the thread).
You do not need to bother with IDs for what you are trying to do.
In every data collection there are two field names one that is for humans to see. Example in your screen shot would be “Description” or “SocialMedia”. One that code wants to see (there are called field keys and are camel cased versions of your Field names. So “Description” becomes “description” and “SocialMedia” becomes “socialMedia”.
In addition if you have renamed the field name used by a human to identify the column it will retain the old field key name. So if you rename “SocialMedia” to “Social Media Links” the field key will remain the same “socialMedia”.
Now what you are trying to do is see if one of the itemData column values is null or not in your test to show or hide the email or other elements.
To determine the value of an itemData column you need to know the correct field key name and use it as an object selector.
itemData is an object and will look something like this:
{
socialMedia:”Facebook,
email:”john.smith@email.com”,
description:”This describes facebook info”
}
These are the column values from the data collection (data set).
You access each value in one of these two ways:
let email = itemData.email;
or
let email = itemData[“email”];
These are syntactically the same.
Now if itemData[“email”] is undefined or empty then email will likely be null. Null is what we call untruthy. This means it doesn’t have a value that is intelligible and is treated by JavaScript as false (e.g. not true or untruthy).
The conditional test if (xxx) {}. tests for something to be truthy. So if (email) {} is saying “if email is truthy then we can proceed into the if statement block. That is if email contains a meaningful value.
OK mini tutorial over.
What you need to do is “SEE” what data is being processed by your code and to do this you need to sprinkle a few console.log() statements in your code to see what the data is that your code is seeing.
You also need to fix your onItemReady handler argument list :-).
Since you are working with a repeater you need to be clear on the scope of the elements you are working with. $w is how we access elements in the “global scope” of the Velo IDE. When you are inside of a repeater (that is you have the same element recurring for each item being displayed) you need to be using the repeater item scope. So don’t use $w as the first handler argument you need to use $item (or something else that is NOT $w).
So to help you debug and fix you code you need to alter your onItemReady and the element access code like this
// Make sure handler uses $item as first argument NOT $w
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
// Use console log to look at the itemData value being handled by the onItemReady repeater
// because the itemData value is an object we will use stringify to see the output
console.log(`itemData => $log {JSON.stringify(itemData)}`);
// In order to hide the email element we need to use the $item scope
$item(“#email”).hide();
// In order to show the email element we need to use the $item scope
$item(“#email”).show();
});
Of course the code above is not a replacement for your code but intended to show you what you need to do when working inside of a repeater.
