How to display data from external API in Webflow - Part 1

Hey there! In this guide, we'll walk you through the process of displaying data from external APIs on your Webflow site. We'll cover three main steps: setting up Webflow, understanding the JavaScript code required, and swapping out APIs if needed. Let's get started!

Step 1: Setting Up Webflow

1. Create a Container: First, you need to create a container in Webflow where the data from the API will be injected. In our example, we'll use a grid. Click the "+" button, select the grid icon, and create a new grid element.

2. Assign an ID: Once you've created the grid, click the settings icon and assign it a unique ID. This ID will tell the JavaScript where to look before injecting the data. We'll call our grid "cards-container".

3. Create a Sample Card: Next, create a sample card that will serve as a template for displaying each data item. Add a div block and style it as desired. Our sample card includes an image, an H3 tag, and a paragraph tag.

4. Hide the Sample Card: After creating the sample card, hide it by adding a "hide" class with display: none; so it doesn't show up when listing all the results.

5. Add JavaScript: In the page settings, scroll down to the "Before Body Tag" section. If there's no open and closed <script> tag, create one. This is where you'll paste the JavaScript code to fetch and display the data.

Step 2: Understanding the JavaScript Code

We've provided a JavaScript code snippet that fetches data from an external API and injects it into your Webflow site. Let's go through it line by line:

1. Creating a Variable: The code starts by creating a variable apiUrl and storing the API URL in it.

2. Function getRestaurants(): This function is a collection of operations that execute when the page loads.

3. Opening an API Request: The code uses XMLHttpRequest to open a connection to the API specified in apiUrl.

4. Parsing JSON Data: When the API request is successful, the code parses the JSON data received from the API.

5. Finding the Container Element: The code finds the element with the ID "cards-container" (the grid we created earlier) to inject the data.

6. Looping Through Data: For each data item (e.g., restaurant), the code creates a new card using the sample card's style.

7. Populating Card Content: The code populates the card with data from the API, such as the image URL, name, and description.

8. Appending Cards: Finally, the code appends each populated card to the "cards-container" grid.

Step 3: Swapping Out APIs

If you want to use a different API instead of the one provided in the code, you can easily swap it out. Here's how:

1. Replace the API URL: Find the line where the apiUrl variable is defined and replace the URL with the one for your desired API.

2. Remove or Modify API Endpoint: Depending on your API, you may need to remove or modify the endpoint specified after the base URL (e.g., /restaurants).

3. Update Data Structure: Examine the response structure of your API and update the code to access the correct data properties (e.g., data.results.planetName instead of data.restaurantName).

4. Modify Content Injection: Update the lines of code that inject content into the card elements (image, heading, paragraph) to match the data structure of your API.

5. Remove Unnecessary Code: If your API doesn't provide certain data (e.g., images), remove the corresponding code lines that inject that data.

By following these steps, you can easily adapt the provided JavaScript code to work with any external API and display its data on your Webflow site.

That's it! We covered how to set up Webflow, understand the JavaScript code, and swap out APIs. With this knowledge, you can now integrate dynamic data from external sources into your Webflow projects. Happy coding!