Integration

How to display data from external API in Webflow - Part 2 - View a single item from a list

Summary

Greetings, fellow creators! In this step-by-step guide, we'll dive into building a single item view using Xano and Webflow. This will allow you to click on an item from a list view and display detailed information about that specific item on a separate page. Let's get started!

Prerequisites

Before we begin, make sure you have the following:

A Xano account (sign up for free at https://xano.io)
A Webflow project with a list view already set up (check out our previous guide on displaying data from an external API in Webflow)

Setting up the Single Item View in Webflow

In your Webflow project, create a new page and give it a slug like "item" or "single-item".
Add a container div with an ID (e.g., "item-container") where the single item data will be displayed.
Inside the container, create a div (e.g., "sample-style") to hold the item's elements, such as an `
` for the title, an `` for the image, and a `
` for the description.
Style these elements as per your design requirements.
Add a link back to the list view page for easy navigation.

Setting up the Single Item API Endpoint in Xano

In your Xano project, create a new API endpoint for fetching a single item using the `getRestaurant/:id` pattern.
Configure the endpoint to return the desired data fields for the single item view (e.g., title, image, description).

Connecting Webflow to the Xano API

In your list view page's JavaScript, locate the click handler function that triggers when an item is clicked.
Modify the click handler to change the browser's location to the single item view page, passing the item's ID as a query parameter (e.g., `/item?id=2`).

javascript // Example click handler document.querySelector('.card').addEventListener('click', function() { const itemId = this.dataset.id; // Get the item ID from the clicked element window.location.href = `/item?id=${itemId}`; // Navigate to the single item view page with the ID as a query parameter });

In the single item view page's JavaScript, retrieve the item ID from the query parameter using the `URLSearchParams` object.

javascript const urlParams = new URLSearchParams(window.location.search); const itemId = urlParams.get('id') || '1'; // Get the 'id' query parameter, or default to '1'

Use the retrieved item ID to fetch the single item data from the Xano API endpoint you created earlier.

javascript const xanoUrl = 'https://your-xano-project.api.xano.io/api:xxxxxx'; // Replace with your Xano API URL fetch(`${xanoUrl}/getRestaurant/${itemId}`) .then(response => response.json()) .then(data => { // Update the single item view with the fetched data document.querySelector('#item-title').textContent = data.title; document.querySelector('#item-image').src = data.imageUrl; document.querySelector('#item-description').textContent = data.description; }) .catch(error => console.error('Error fetching item data:', error));

Publish your Webflow site and test the single item view functionality by clicking on items in the list view.

Congratulations! You've successfully built a single item view using Xano and Webflow. Now, users can click on an item from the list and view its detailed information on a separate page.

In the next guide, we'll explore how to implement filters in your Webflow project, allowing users to narrow down the list view based on specific criteria. Stay tuned for more exciting updates!

This transcript was AI generated to allow users to quickly answer technical questions about Xano.

Was this helpful?

I found it helpful

I need more support