Data Binding Multi-Dimensional Arrays

Technical Questions
1

I am having some difficulties trying to data bind an array element inside another array. Is this possible? I feel like this is common.

I am using a fetch to hit my API inside the “Data → Edit JS + CSS” feature. I am successfully capturing the response.

Sample Response

{
  user: {
    name: Blake,
    nickname: Bull
  },
  favorites: [
    {
      id: 1,
      name: colors,
      items: [
        {
          id: 3820,
          name: red
        },
        {
          id: 3821,
          name: blue
        }
      ]
    }
  ]
}

How can I loop and data bind to favorites.items … to display values Red and Blue ?

2

Builder provides number of helpful properties on it’s state for each block in a repeat, so if you’re doing a repeat on a state.results , you’ll get under it , $resultsItem , and $resultsIndex and those will be available for any repeat under that.
I created a fiddle that loops through an array of arrays, to inspect the object you can see it in the data tag > edit content JS + CSS (scroll till the end)

If you want to see how’s the repeats happening, please go through the layers in the layers tab, and you’ll see a repeat icon, that you can click and see what is being repeated for that layer.

Screen Shot 2020-05-26 at 1.08.58 PM
Screen Shot 2020-05-26 at 1.08.58 PM964×492 21.3 KB

3

Marked as solved!

First loop will repeat on state.favorites
Second loop will repeat on state.favoritesItem.items … state.favoritesItem is set from first loop.

Thank you

1 Like
4

Hi, I’m trying to do something similar but I have already extracted the json data into state.listingsArray as follows:
[{
address: “125 Main St”,
price: 1200000
}, {
address: “7620 197th Street SE”,
price: 1225000
}, {
address: “9603 Avenue M”,
price: 899999
}, {
address: “904 Chestnut Street”,
price: 129900
}]

But my question is how do I do a repeat over this to display a list of the addresses (as text fields)?

I tried doing “Repeat for each state.listingsArray” but I can’t display each address without an index…

5

Hi @asriram, to access the index within a repeated element, you can use state.$index. However, you should be able to bind the address to text within a repeating element without this.

1 Like
6

Oh yes, got it! Thanks a lot @sarah !!

1 Like