> For the complete documentation index, see [llms.txt](https://docs.flexmoney.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flexmoney.uk/documentation/draftbit/fetching-data.md).

# Fetching Data

With the `Fetch` component, you're able to easily pull live data from a third party RESTful API directly into your apps in Draftbit.

> ## 🚧
>
> For security reasons, it's recommended that you use the APIs and Services method to save your API configuration when Authentication is needed.

If you don't have your own data but would like to try the feature, feel free to grab some sample data from Draftbit's [Example Data](https://example-data.draftbit.com/) service. For this example, we'll use the `/users` endpoint.

To get started, make sure your Layer Tree is set up similar to the picture below.

![](https://files.readme.io/7cc5587-Screen_Shot_2020-08-15_at_10.42.59_AM.png)![](https://files.readme.io/7cc5587-Screen_Shot_2020-08-15_at_10.42.59_AM.png)

> ## 📘Make sure the 'Fetch Render Item' of the List is set to Data
>
> Read more about the different Fetch Render Item settings [here](https://docs.draftbit.com/v3.0/docs/data#list)

Select the Fetch component in the Layer Tree and go to the Data tab of the Properties Panel. Select a Service from the dropdown. You are also able to configure a new Service directly from the Fetch component (check the [REST Services & Endpoints](/documentation/draftbit/rest-services-and-endpoints.md) articles for more information on the configuration options). Once you've selected a Service, you can also select or create an Endpoint as well.

![](https://files.readme.io/2a1f4bd-new_fetch.gif)![](https://files.readme.io/2a1f4bd-new_fetch.gif)

To pass the data to the data-enabled components inside of the List, select the `List` in the Layer Tree, and change its Mapped Data Value to `data`. Next, select the data-enabled component in the Layer Tree and change its Mapped Data Value to the property you'd like it to display.

![](https://files.readme.io/a19ab40-mapusers_0518.gif)![](https://files.readme.io/a19ab40-mapusers_0518.gif)

> ## 🚧
>
> When configuring an Image component, there’s no validation built-in to ensure you’re passing an image URL to the component. If you find it not working, double check your data in the `Results` section of the `+ Build Query` modal.

If you've never used Airtable before and are interested in using it as a database, check out their [documentation](https://support.airtable.com/hc/en-us/articles/360021518753-Getting-started-starting-with-the-base-ics) that will tell you everything you need to get started.

> ## 🚧Working with Images in Airtable
>
> If you've uploaded your images directly into Airtable with the 'Attachments' field type, make sure to change the field type to 'Single Line Text' so the only thing in the field is the actual image URL (ex. <https://dl.airtable.com/...>).

Once you’ve created a Base and entered your data, click the question mark in the top right corner and select `API Documentation` in the dropdown.

![](https://files.readme.io/4ee0d6d-Screen_Shot_2019-08-30_at_1.35.37_PM.png)![](https://files.readme.io/4ee0d6d-Screen_Shot_2019-08-30_at_1.35.37_PM.png)

On the API Page for your Base, scroll down to the Authentication section. In the top right, click the `show API Key` checkbox so that your API Key populates the placeholder in the example URLs.

![](https://files.readme.io/e1c6581-Screen_Shot_2019-08-30_at_1.50.21_PM.png)![](https://files.readme.io/e1c6581-Screen_Shot_2019-08-30_at_1.50.21_PM.png)

Once you’ve generated the API Key, go back to the builder, add the Fetch component to your screen (you can use the same set up as the above example) and enter your Base’s URL and the API Key under the Headers.

![](https://files.readme.io/ef09b38-Screen_Shot_2020-08-17_at_10.06.20_AM.png)![](https://files.readme.io/ef09b38-Screen_Shot_2020-08-17_at_10.06.20_AM.png)

> ## ❗️Entering API Keys in the Headers section of the Fetch component exposes the API Key in code.
>
> Instead, it is recommended that you save your API Key under Global Variables.

Add a `List` component inside the Fetch component like before. While the `List` is selected in the Layer Tree, go to the Data tab of the Properties Panel and set the Mapped Data Value to `data.records`.

> ## 📘
>
> As a general note, make sure to set the top level of data as the Field for `List` components.

After you've configured the `List`, you can pass data to `Text` and `Image` components by selecting the Mapped Data Value that corresponds to the Field (column) Names of your Airtable Base.

![](https://cdn.readme.io/img/book-icon.svg?1613687634098) Updated about a month ago

* [Table of Contents](/documentation/draftbit/fetching-data.md)
  * [What Components Are Data-Enabled?](/documentation/draftbit/fetching-data.md#what-components-are-data-enabled)
  * [JSON](/documentation/draftbit/fetching-data.md#json)
  * [Airtable](/documentation/draftbit/fetching-data.md#airtable)