Using API Data Source


#1

In this tutorial we will show you the basics of API Data Source. We are going to connect to the popular Unsplash API to retrieve the latest photos in a nice masonry layout.
This API requires an api key, which we already retrieved. Please make sure to check the Unsplash docs: https://unsplash.com/documentation to learn how to get your own API key.

Note, that every API has its own documentation and its better to check it before start using it.

We added a simple layout, which will be converted to a masonry grid later. It contains a bootstrap 4 container, with a row and column inside it. We added an image inside the column. Click the add new component button:

Then open the Data category (1) and add API Data Source (2):

You will find the API Data Source component properties in the properties panel. Here you Add API URL (1) and Query Parameters (2) and/or API Headers (3) if your requires so:

Firs we paste the API URL:

Then, as we want to limit the number of photos retrieved, as per API documentation we need to add a query parameter:

We add it, and assign a name to it. Also we add a value to it - it can be static or dynamic value. For static values, which are not numbers make sure to wrap your value with single quotes like: ‘staic value’. For dynamic values and numbers that’s not required:

If your API requires, you can add header as well, just click the add new header button:

Add a name and value for it, again it can be static or dynamic value. For static values, which are not numbers make sure to wrap your value with single quotes like: ‘staic value’. For dynamic values and numbers that’s not required:

When you are done adding your parameters and headers, click the Defin API Schema button:

You will see your parameters and headers here, you can change them to test the data if you want. Click the Fetch Schema button, to retrieve API Schema. It will be used as a data source on your page:

You will see the data, returned by your API under data:

Also you will see any response headers returned. You can use the information from response headers on your pages later, if you need:

Click the save button:

Now, let’s convert the row to a masonry grid and add the dynamic API data to it. Select the row element (1) and click the Make Masonry button (2):

Then select a dynamic expression for the masonry:

We select the repeating data element, returned by our API Schema:

And you can see our images repeated 24 times. Let’s bind dynamic URL to the image. Select image (1) and add new dynamic attribute (2):

)

Open the images category and click image source:

Then select an expression for the dynamic image source:

Our API returns different URLs fr different image sizes. We select the regular image size URL:

And we are done! Our masonry grid, showing images from a data API is rendered on the page:

That’s how easy it is to connect to a data API, get data from it and use this data on your pages.


WapplerPrevious   WapplerNext



New API Connect Extension help
Working with JSON Data
API Connector components, how to use and connect REST/Curl API's
Hi-Res Image Search
Example of using the API Auth2
Iceland Gas Stations Map
Wappler Official Documentation
Live Stocks Charts
API and JSON
Wappler Weekly Challenge #1
#2

I have followed this tutorial step by step, however I can not get more than a single picture returned as it appears that there is no repeat functionality that would increase the image location index ( unsplash.data[0].urls.small. I have attached screen shots of code and design view.

What am I doing wrong ?


#3

You just pick a wrong binding for the image source. It must be selected from under the repeat in the data picker but you probably select it from under the API source.
Maybe check the detailed explanation here: Data Types and Binding and especially this screenshot:
https://community.wappler.io/uploads/default/original/2X/1/1e1be69d9f650cb13764d40b56e7ad719db545c7.png

It’s the same for any type of dynamic data/repeat with our tools.