Set up an API GET request for list page - Xano

The Data Collections allows you to create API requests to any database or tool with an available REST API.

Here is how to create a GET request to retrieve data to be displayed in your apps.

How to create a GET request

1. In Data Collections, click Create a new collection and select Start from scratch. If you already have a collection, skip to step #3.

2. Enter the name of your collection and an optional description (we recommend putting the source as the description, like Xano).

3. You're ready to create requests! Click the + button to add a new request, then edit the request name to help you identify it.

4. Copy the Endpoint URL from Xano, then return to Bravo and enter the GET request URL.

5. If the API has Headers or Parameters values you need to input in order to send the request call, input them in the section below. (The example request does not require any extra input)

To authenticate the Xano's API request in Bravo:

• Click on the Collection Settings (look for the gear icon beside the collection name).

• Go to the Authentication tab, select Bearer for the authentication type, and leave the token field empty.

• Go to the API request. Under Input Variables & Test Values, add _authorization as the variable name and the auth token as the key.

  

6. Press Send. You will receive a response list of all the data retrieved from the API request. You have successfully retrieved data from an API! 🎉

How to select data items to use in your apps

In your response list under Received Data, you will see all the data items that the API request is sending over.

The text in light gray is the name of the data item. The text in green is text value of the data item, and text in pink is numerical value.

1. If you are selecting data that you want to populate into a list in your design, first select All where you see a dropdown option. This selects the array (list) of data rather than one data record. For instance, in the example provided, there are 150 items. Selecting '0' will pick a unique data, the first one in the list; '1' will choose the second item, and '149' will select the last item in the list.

2. Next, check the box next to all the data items that you want to bind to your app design. Any data you select here will appear as an option to bind in Data Binding.

3. Under Output Variables, it lists all the data items you have selected and automatically denotes the one(s) that is an array.

• Path: Is the internal path of the data item sent from the API. You can define a custom one if needed, if you know what you're doing.

• Variable Name: The name to easier identifies the data item. It appears in Data Binding, and you may also edit this for certain request setups. Learn more.

• Default Value: Is a sample content of the data item. This sample content will also be the placeholder content for any fields that come up blank. You can delete it if you don't want to override any blank fields.

1. We highly recommend updating the variable names and make sure they match the variable names of other requests related to the same table. In this example, we use "population" as the variable name for the population field in the city table. This same name should be used for the population field in any API requests related to the city table like the API GET request for a detail page.

Follow this guide to continue with the Data binding: