Connecting API Data

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=10

Setting up a repeatable element

To 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:

Connecting to your data source

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:

Binding your data

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.

Iterating 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:

Binding data to a specific value on a single element

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