External APIs: Adding multiple records from an external API

Hey there! Have you ever wanted to pull data from an external source and add it to your Xano database? Well, in this blog post, we'll guide you through the process step-by-step. Integrating external APIs can help extend the functionality of your application and enrich your data, so let's dive in!

Prerequisites

Before we begin, make sure you have:

1. A Xano account (if you don't have one, sign up for free at xano.io)
2. A basic understanding of Xano's visual interface and database schema setup

Step 1: Find the API Endpoint

The first step is to locate the API endpoint you want to integrate with your Xano application. For this example, we'll be using the REST Countries API to fetch a list of countries in Europe.

Head over to the API documentation and locate the specific endpoint you need. In our case, we'll use the `/region/{region}` endpoint, where `{region}` is replaced with the name of the region you want to retrieve data for.

Copy the following URL: `https://restcountries.eu/rest/v2/region/europe`

Step 2: Create an External API Request

In your Xano workspace, navigate to the Function Stack and create a new entry by clicking "Add New Entry." Select "External API Request" from the list of available operations.

In the "URL" field, paste the API endpoint URL you copied in the previous step. You can leave the other fields as they are for now. Click "Save" to proceed.

Step 3: Run the API Request and Inspect the Response

To test the API request, simply click the "Run" button in the Function Stack. This will execute the request and display the response in the output panel.

Inspect the response to understand the structure of the data you'll be working with. In our example, the response contains an array of objects, each representing a country with various properties like name, capital, languages, currencies, and more.

Step 4: Set Up Your Database Schema

Before you can add data to your Xano database, you need to ensure that your database schema is properly configured to accept the incoming data. Navigate to the Database section in your Xano workspace and create a new table (or use an existing one) to store the country data.

For this example, let's create a table called "Countries" with the following fields:

• `name` (text)
• `capital` (text)
• `languages` (list of text)
• `currencies` (list of text)
• `population` (integer)

Feel free to adjust the field names and types based on your specific requirements.

Step 5: Parse the API Response

Now that you have the API response and your database schema set up, it's time to parse the response data and prepare it for insertion into the database.

Go back to the Function Stack and create a new variable called `results_we_want`. In the value field, click the dropdown and select "Sub Path" from the options. This will allow you to visually drill down into the nested JSON structure and extract the data you need.

In the Sub Path editor, paste the JSON response you copied earlier using the "Copy Result as JSON" button. Then, navigate through the JSON structure until you reach the array of country objects. Select the entire array and click "Choose."

After saving the variable, you can test it by returning `results_we_want` instead of the original API response. This should display only the array of country objects in the output panel.

Step 6: Loop Through the Data and Insert Records

Since the API response contains an array of country objects, you'll need to loop through each object and insert it as a new record in your database table.

In the Function Stack, add a new entry and select "Loops" from the operations list. Choose the "For Each" loop type.

In the "Items to Loop Through" field, select the `results_we_want` variable you created earlier. This will allow you to iterate over each country object in the array.

Inside the loop, add a new entry for "Database Requests" and select "Add Record." Choose the "Countries" table you created earlier.

Now, you can map the fields from the API response to the corresponding fields in your database table. Xano's "Magic Wand" feature can help you quickly map the fields by automatically matching the field names.

If the field names in the API response don't match your database field names, you can use dot notation to access nested properties. For example, if the "languages" property in the API response is an array of objects with a "name" field, you can use `item.languages.name` to access the language names.

Once you've mapped all the fields correctly, save the changes and run the entire Function Stack.

Step 7: Verify the Data in Your Database

After running the Function Stack, head over to the Database section in your Xano workspace and check the "Countries" table. You should see all the country records populated with the data fetched from the external API.

Congratulations! You've successfully integrated an external API and added data to your Xano database.

Conclusion

Integrating external APIs with your Xano application can be a powerful way to enrich your data and extend the functionality of your application. By following the steps outlined in this blog post, you can easily fetch data from third-party sources and store it in your Xano database.

Remember, the process may vary slightly depending on the API you're working with and the structure of the data you're dealing with. However, the general principles of parsing the API response, setting up your database schema, and looping through the data to insert records remain the same.

Happy coding, and keep exploring the possibilities with Xano!