Grabbing Data from A Repeated Set of Data

Technical Questions
1

I am trying to grab the specific data from each repeated element. I created a binding for a set of data to display content cards. The cards are repeating but I haven’t been able to figure out how to access specific card data. I need to be able to grab a name for each card from another set of data that is indexed with an id from the content card that is repeated.

Screen Shot 2022-01-21 at 2.29.46 PM
Screen Shot 2022-01-21 at 2.29.46 PM1446×1008 54.5 KB

I saw a post about using state.$index to access the index of the item but that’s not working.

I also have 1 other questions below:

  1. Can you console log in the custom javascript sections? If so, where can I see the logs?
1 Like
2

Hi @hlopez!

Here’s some general direction for accessing specific item data while using Repeat for Each:

When using Repeat For Each, you can include camel-cased “Item” appended to the name of the array you’re looking in. For example, let’s say you have an array of objects that represent each card:

state.cards = [{...data}]

Inside of Builder, you can now use state.cardsItem.id to look for the id value data for the current item in the “Repeat for Each”.

If this doesn’t get you headed in the right direction, please feel free to respond with some clarification regarding your tech stack and show the shape of the data you’re working with!

Regarding the custom Javascript section, are you using the one under Data > “Custom JS + CSS”?

When console logging, you’ll want to make sure your code is in the if(Builder.isBrowser) section of the JS panel. Then, to see your console log in action, head to your site preview. (The eye button next to “Publish”!).

Thank you for these questions!

1 Like
3

Thank you, Logan this is super helpful! I can see my logs!

I have contentData that is an array of objects just like your state.cards = [{...data}] example it i is the current item in the repeat for each and I have the creator information in an object with {key:value} pairs of {slug:name}. I created a function in data > element data bindings for the text that looks like this:

function creatorName () {
    const currentIndex = state.contentData.$index 
    const lowerCaseBrandId = state.contentData[currentIndex].brand_id.toLowerCase();
    return state.creatorData[lowerCaseBrandId] || 'Encantos';
}

Is it possible to access the logs in the edit code section of element data bindings?
Screen Shot 2022-01-21 at 4.50.12 PM

4

I was able to access the logs in the edit code section of element data bindings in the preview page.

const lowerCaseBrandId = state.activePageItem.brand_id.toLowerCase()
state.creatorData[lowerCaseBrandId] || ‘Encantos’;

when I log the above, I get the correct item but it still returns undefined

5

Hi @hlopez! Are you still logging undefined for the “current item”?

6

I was able to figure it out. I need to export the variable.