Blank screen on Webflow after following all the steps from tutorial

Hi,

I followed every step from this tutorial: “How to display data from external API in Webflow” and replaced the elements in the JavaScript file from “restaurants” (as in the example) to “books” and its equivalent (from my Xano DB).

However, when I publish and view the webflow site, the page comes up as blank. I don’t see anything.

Webflow test page: xano-test
JS code after my edits: // Create a variable for the API endpoint. In this example, we're accessing Xano - Pastebin.com

The “id” name of the webflow grid is “people-grid” and the card id is “people-card”.

I’m not sure what I’m doing wrong here. I’ll be happy to provide any other info required to debug this. Thanks!

Couldn’t add the tutorial link in the question since new users can only add upto 2 links. This is the tutorial I am referring to: https://youtu.be/HMsrFzoZYr0

Hey @vatsal ! I used your Javascript and it worked just fine. I made a loom video showing you. Make sure you’re changing the IDs (not the classes) on the Webflow side:

Thanks a bunch Prakash! That is exactly what I was doing wrong (ID/classes).

Also, the other 2 tutorials that you mention in the webflow video:

  1. Single page with the specific restaurant’s details
  2. Using category filters

When are these two tutorials going live? I’ll need those features for what I’m trying to build.

p.s. I just started using Xano and I kinda dig it! Thank you!

Hey @vatsal glad you’re enjoying Xano!! You’re in luck, we’ve just published how to get to the single page:

https://youtu.be/l-VxreUsl6U

We’ll be publishing the category filters in a few days!

1 Like