By connecting to your API data, you can bind a single element or iterate over your data in the Builder Visual Editor. This tutorial covers how to set up an element, connect your data, and bind singly or iterate through your data.
To follow the example, you can use your own JSON API endpoint, tweaking to your needs, or use the one from the tutorial:
https://randomuser.me/api?results=10To iterate over a list of entries in your data, first set up a repeatable element that can accommodate your data objects. If you already have a repeatable element, check your structure against these instructions or skip to the next section.
- Create a Page if you don't have one already.
- Within the Visual Editor drag and drop a Box block from the Insert tab into the content area.
- Drag and drop another Box block into the first Box. Now you have one Box nested within another Box.
- Drag and drop an Image block into the inner Box.
- Select the Box that wraps the image, and give it a width of
200px. - Drag and drop a text box below the Image, within the same Box as the Image.
The following video demonstrates this process:
To add your JSON API endpoint:
- Go to the Data tab.
- In the API Data section, click the + API Data Source button.
- Name the Data Source according to your use case. This example uses
users. - Paste your JSON API endpoint URL into the input field. The format of this URL depends on your API. If you'd like to use the example endpoint, paste in
https://randomuser.me/api?results=10. - Click the Done button.
The following video demonstrates providing your endpoint URL:
After you've connected your data by specifying your JSON API endpoint, you can bind a single piece of data, multiple items, or iterate through your data.
Tip: Iterating, or repeating, the element for every item in your data is optional. If you'd prefer only to bind one item, skip to the next section.
To cause the smaller box, the one that contains the image, to repeat for every item coming in from an API, do the following:
- Select the inner Box that contains the Image and Text blocks.
- Still in the Data tab, expand the Element data bindings section.
- For Repeat for each, click the down arrow and select what you'd like to list. This example uses Results. This provides one item per result in the array.
- Select an Image block.
- In the Element data bindings section, click the + New Binding button.
- For the Get dropdown, select Image.
- For the From dropdown menu, select the large picture option, Results Item - Picture - Large.
- Select a Text block.
- In the Element data bindings section, click the + New Binding button.
- For the Get dropdown, select Text.
- For the From dropdown menu, select the large picture option, Results Item - Name - First.
The following video demonstrates iterating through 10 users from the example endpoint:
Iterating over your data is optional. You could instead bind to a single element, rather than iterate over all data from the endpoint. For example, to bind to the value for the first name for the first item in the array:
- Select an unbound Text box.
- In the Data tab, after having provided your JSON API endpoint, expand the section Element Data Bindings.
- For Get, choose Text.
- For From, select or enter in the code editor
state.users.results[0].name.first
If you are facing issues running your data bindings on SSR, please consult our integration tips to learn more.
After your data is displaying, you can style your content however you like. As an example, this video shows changing the layout to a grid pattern by selecting the outermost Box, setting the Inner Layout to Grid, and applying a margin.
For more information, read:
- Dynamic Preview URLs: learn more about dynamic data fetching.
- Custom Code in the Visual Editor: find out more about state and actions.
