# Set up an API GET request for list page - Airtable

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.

{% hint style="success" %}
If you are connecting to **Airtable**, you can use the [Airtable API Wizard](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection) to automatically set up GET requests for you. Also, if you have an OpenAPI, Postman or Swager collection, you can import it via JSON file.
{% endhint %}

{% hint style="info" %}
You can utilise other API verbs (i.e. POST) to retrieve data if your API specifies otherwise. Simply change the verb type of the request URL.
{% endhint %}

**Example Data**

Use this Airtable example to get your data.

{% embed url="<https://airtable.com/apprcIfm5cqZZ4yPo/shrXFNGrxsRLDegaq>" %}
Example Airtable Database
{% endembed %}

## How to create a GET request

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

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FKWAbmlE7l9nPZoGUWHUj%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-2.jpg?alt=media&#x26;token=97dc00ce-3224-4304-9592-a751914a831b" alt=""><figcaption></figcaption></figure>

&#x20; 2\. Enter the name of your collection and an optional description (we recommend putting the source as the description, like Google Sheet).

{% hint style="info" %}
A **Collection** is a group of API requests, normally from the same data source.
{% endhint %}

![Create a new collection](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FsgsNHR1BFsbwd709pW6z%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable%20\(1\).jpg?alt=media\&token=4c549f05-2f7f-43bc-a5c8-c4835a8b62ea)

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FRAVtK9JRZpgPUfOdswLn%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable%20(3).jpg?alt=media&#x26;token=cecf8447-ea20-4e59-ab71-9880a2e6ff30" alt=""><figcaption><p>Add name and description to the new collection</p></figcaption></figure>

&#x20; 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.

![Add a new API request](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F7kX4pGeVW6RH6ggLu9Qk%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-5.jpg?alt=media\&token=5cc8825c-685e-40fb-bdf6-3df94178900a)

&#x20; 4\. **Input the GET request URL** from the API of your choosing. (Or use the example request we listed above).

To obtain the API request URL in Airtable, do the following steps:

1. Select **Help** from the top right corner of the screen.
2. Choose **API documentation** from the Additional Resources list.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FyGZIull36wionLcarmLT%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable%20(4).jpg?alt=media&#x26;token=3b19c63b-0210-4a33-83c6-d8cb358b30b9" alt=""><figcaption><p>Airtable - API documentation</p></figcaption></figure>

3. Once the Airtable API for your base is open, navigate to the left-hand menu and locate the specific table, in this case, Cities table. Select "List records" to get information about the API and cURL.&#x20;

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FGrCLLr2vZyNN3Hg153Xn%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable.jpg?alt=media&#x26;token=47cbf691-2db9-47ce-9fa1-31606d4548c7" alt=""><figcaption><p>Airtable's API documentation</p></figcaption></figure>

4. Copy the URL from Airtable, navigate back to Bravo, and paste it into the request URL field.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FpUnzaJLlGnFWMpu8fsy2%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable.jpg?alt=media&#x26;token=d6c9b364-a452-4b01-b62e-10bb34036dfc" alt=""><figcaption><p>Add the API request URL</p></figcaption></figure>

&#x20; 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).

If it require authorization do the following steps:

1. With Airtable open, click on your account in the upper right corner of the screen. Here you'll see a dropdown menu appear. Click the **Developer hub** option. Or if you are currently signed into Airtable, you can [click here to access the developer hub](https://airtable.com/create/tokens).

![Add the Headers](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fz9lJRPSu8MQox22o9WJ1%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-7.jpg?alt=media\&token=83b093ab-a079-489f-a41e-c2137702bd20)

* Click **`Create token`** from the **Personal access token** ta&#x62;**.**
* Set a **`Name`**, for example: **Bravo API key**.
* Click **`+ Add a scope`** and select **`data.records:read`** and **`data.records:write`**. Make sure both are selected.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FVYYrAY0QzCejUvsSSC8e%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-8.jpg?alt=media&#x26;token=089ba315-274b-425d-a3e0-3cbc2b2cf8b7" alt=""><figcaption></figcaption></figure>

* Click **`+ Add a base`** and select **All workspaces** (you may select a specific base if you want).
* Click **`Create token`**. Make sure you verified your email first.
* A new modal shows up: **Your token has been created**. Copy the token.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FgXeD524zrt6kKC3rJ4WS%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-9.jpg?alt=media&#x26;token=3145d221-a7ea-476d-b6c5-3247854d8431" alt=""><figcaption></figcaption></figure>

2. Go back to Bravo, add a header with key **`Authorization`** and value `Bearer [API KEY]` (replacing \[API KEY] with your token).

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FMSl3A9IeQRRVuefuZdd0%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-1.jpg?alt=media&#x26;token=114361d4-9969-46a8-b85e-365b06abc7fc" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Another way to authenticate all endpoints is by configuring the authentication settings in the API collection settings (click the gear icon next to the API collection name).

1. Go to the Collection Settings > Authentication tab.
2. Set Authentication type as Bearer.
3. And add the API Key copied from Airtable to the token field.
4. Save.
   {% endhint %}

&#x20; 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! 🎉

{% hint style="warning" %}
If you encounter any error message after clicking Send, you can consult the **`Debug & Inspect Response`** section to get more information about the error.
{% endhint %}

## 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.

&#x20;  1\. To **populate data into a list** in your design, first choose **`All`** from the dropdown menu. 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.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FFq232ylqLFkLqizndmDu%2FSet%20up%20an%20API%20GET%20request%20for%20list%20page%20Airtable-11.jpg?alt=media&#x26;token=43d6ac6a-6d8a-48ea-9564-98f2492616ce" alt=""><figcaption><p>Selected data from received data</p></figcaption></figure>

{% hint style="success" %}
Bravo's API limit is set at 200 items. To display more, add [pagination](https://docs.bravostudio.app/connect-api/pagination) to the api request, allowing you to show up to 200 items per page.
{% endhint %}

&#x20;  2\. Next, **tick the box** next to the data items you wish to link to your app design. Selected data will be available for binding in Data Binding.

&#x20;  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](https://docs.bravostudio.app/connnec-api/request-url-variables).
* **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.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F2CNlTB8flHxGk0v2bB9q%2FScreen-Recording-2024-06-27-at-11.37.46.gif?alt=media\&token=1d90c59f-dc15-4f28-a6fc-13e380ab2985)

{% hint style="success" %}
Use the [Debugging & Inspect Response](https://docs.bravostudio.app/connect-api/debugging-api-issues/data-library-data-library-debug-section) tool to verify that you're receiving the correctly the data.\
\
If the HTTP requests is successful, a 200- OK status code will be returned from the API, together with the data. \
\
If there was any issue with the HTTP request, an error code will be returned from the API.\
\
Learn more about [Errors in API requests](https://docs.bravostudio.app/good-to-know/troubleshoot/errors-in-api-requests).
{% endhint %}

Follow this guide to continue with the Data binding:

{% content-ref url="../../../../data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-list-page" %}
[data-biding-bind-data-to-ui-for-a-list-page](https://docs.bravostudio.app/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-list-page)
{% endcontent-ref %}
