🍕 GET Data from a REST API
413
In this article, we will learn how to get data from a REST API using two examples:
2- API endpoints created in Xano
In addition, we will touch on CORS issues you may run into and how to debug API requests that fail.
Note that, to get data from Xano into WeWeb, you can use WeWeb's native integration with Xano to save time. We thought we'd take the time to show you how to get data from Xano with the REST API plugin to help you understand how REST APIs work.
Get Data from the Rick & Morty API
In this tutorial, we display data from the Rick & Morty REST API in WeWeb:
🔥 Pro Tip 🔥
The Rick & Morty API tutorial was recorded before we made the variables available in the formula tab.
You can now find and bind the variables directly in the var tab:
Or the user tab if the variable you are looking for is related to an authenticated user:
Get Data from API Endpoints in Xano
This tutorial assumes that you already have a Xano database with API endpoints.
If you don’t, you’ll need to get started with Xano before you can import data from Xano to WeWeb.
In the example below, we are working with Xano’s “Careers” template which you can find in their marketplace:
This template comes with 3 tables and 16 API endpoints.
The 3 tables – job, application, and category – is where you’ll find your list of jobs, applications, and job categories respectively.
The 16 API endpoints are how you’ll be able to fetch data from your Xano tables to display it in WeWeb.
If you’re not familiar with APIs, you might want to pause and learn more here.
Add Xano Collection Data to WeWeb
In order to display data in WeWeb, we first need to get data from XANO.
In the example below, we will add the list of jobs from the “job” table in Xano’s “Careers” template.
Step 1: create a new REST API data source in WeWeb in the "Plugin" menu
Step 2: create a new collection in WeWeb in the "Data" menu
Step 3: copy the GET url that fetches the list of jobs in the “job” table from Xano, i.e. “query all job records”, and paste it in WeWeb (see screenshot below)
Step 4: type in “items” as the result key. Note that this is specific to how Xano returns the data. Other APIs may require a different result key.
To find the API url in Xano, go to your API endpoints:
This is what your API call should look like in WeWeb:
The URL will be different from the screenshot since you’ll be getting data from your own Xano database, but the rest should look the same 🙂
That’s it. Now you should be able to see the data you fetched from Xano:
🔥 Pro Tip 🔥
WeWeb's REST API plugin only accepts HTTPS requests. If you're trying to follow this tutorial with a public API that uses HTTP requests, WeWeb will return an error message.
Once you have fetched data successfully, learn how you can display that data on a page.
Resolving CORS Issues
Some REST APIs, like the Rick & Morty API or Google Maps, accept client-side requests, i.e. requests from your users browsers.
But many REST APIs, like Twitter, only accept server-side requests.
By default, being a frontend builder, WeWeb's REST API plugin makes client-side requests.
However, you do have the possibility to make server-side requests:
In the example above, you can see Twitter's API returns a Network error when we use the default configuration of the REST API plugin.
However, once we enable the "Make this request through a server" option, it returns the result we were looking for.
Debugging API Requests
When you start working with APIs, you'll run into a lot of errors.
It's completely normal and nothing to worry about 🙂
WeWeb will display error messages to help you figure out what went wrong.
Learn more about debugging Workflows and API requests.