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://fakestoreapi.com/products

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.

• Within the Visual Editor drag and drop a Box block from the Insert tab into the content area.
• Drag and drop an Image block into the Box.
• Drag and drop a Text element also in the Box

Connecting to your data source

• Now 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 product.
• Paste your JSON API endpoint URL into the input field. The format of this URL depends on your API.
• Click the Done button.

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

To cause the 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 product image.
• 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 price option.
  The following video demonstrates iterating through products 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.product[0].title
  The following video demonstrates binding a single element from the example endpoint: