Data not displaying in Webflow

Christopher McNeil

I went through How to display data from external API in Webflow - Part 1, and for hours I've been trying to get the data to show to no avail.

I've compared the code of my implementation and the example, and the only differences are the paths.

I took a look at the console and found these errors. After reviewing the code still can't identify the problem.

Where am I screwing up?
[reservations-console.png]
Here's a screenshot of the API configuration
[event reservation filter.png][event reservation output.png]
List structure
[list structure.png]
Code

// Create a variable for the API endpoint. In this example, we're accessing Xano's API
let xanoUrl = new URL('https://x8ki-letl-twmt.n7.xano.io/api:Y6KRNc_U/');

// Define a function (set of operations) to get restaurant information.
// This will use the GET request on the URL endpoint
function getReservations() {

// Create a request variable and assign a new XMLHttpRequest object to it.
// XMLHttpRequest is the standard way you access an API in plain Javascript.
let request = new XMLHttpRequest();

// Define a function (set of operations) to get restaurant information.
// Creates a variable that will take the URL from above and makes sure it displays as a string.
// We then add the word 'restaurant" so the API endpoint becomes https://x715-fe9c-6426.n7.xano.io/api:Iw1iInWB/restaurant
let url = xanoUrl.toString() + 'event_reservation';

// Remember the 'request' was defined above as the standard way to access an API in Javascript.
// GET is the verb we're using to GET data from Xano
request.open('GET', url, true)

// When the 'request' or API request loads, do the following...
request.onload = function() {

// Store what we get back from the Xano API as a variable called 'data' and converts it to a javascript object
let data = JSON.parse(this.response)

// Status 200 = Success. Status 400 = Problem. This says if it's successful and no problems, then execute
if (request.status >= 200 && request.status < 400) {

// Map a variable called cardContainer to the Webflow element called "Cards-Container"
const cardContainer = document.getElementById("Cards-Container")

// This is called a For Loop. This goes through each object being passed back from the Xano API and does something.
// Specifically, it says "For every element in Data (response from API), call each individual item restaurant"
data.forEach(event_reservation => {

// For each restaurant, create a div called card and style with the "Sample Card" class
const style = document.getElementById('samplestyle')
// Copy the card and it's style
const card = style.cloneNode(true)

card.setAttribute('id', '');
card.style.display = 'block';

// When a restuarant card is clicked, navigate to the item page by passing the restaurant id
card.addEventListener('click', function() {
document.location.href = "/item?id=" + event_reservation.id;
});

// For each restaurant, create an h3 and set the text content to the restaurant's title
const h3 = card.getElementsByTagName('H3')[0]
h3.textContent = event_reservation.member_webflow_id;

// For each restaurant, create an paragraph and set the text content to the restaurant's description
const p = card.getElementsByTagName('P')[0]
p.textContent = `${event_reservation.created_at.substring(0, 240)}` // Limit to 240 chars

// Place the card into the div "Cards-Container"

cardContainer.appendChild(card);
})
}
}

// Send Restaurant request to API
request.send();
}



// This fires all of the defined functions when the document is "ready" or loaded
(function() {
getReservations();
})();

Michael Udinski

Hey Chris -

Have you seen the codepen we published?
Hopefully that helps you use as a reference point when debugging! 

Christopher McNeil

Thanks, Michael! That helped a lot. Today I learned that the field type being sourced from the API must agree with its display element. 

I was trying to display .created_at (timestamp) inside a paragraph (text). When I switched the path to a field type with text, the magic happened.

Hilarious, embarrassing, and worth it. I'm hooked...

Michael Udinski

Glad that helped you figure it out!