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

[@ManOfAllAges]

Wow, this is the best intro to APIs that I've seen on all youtube. I was delaying a project in webflow because I knew the need of using an API but had only a limited understanding of APIs/JS. Now I'm about to implement all of this on my site. Thanks for sharing.

[@rolandlopez7763]

WOW! I know this is 2 years old but what a TERRIFIC video. You really simplified the whole API process. Thank You!

[@areeb9582]

This perfectly explains how we can bring in data from an external API. Letsgoo Javascript!!

[@SpeerAndrew]

Super useful and had one comment to add that might be helpful. On the video the ID for the "Sample Card' is 'Sample-Card' but in the code and the dummy webflow website the ID is 'samplestyle'. As soon as I swapped that out it worked. It's also worth noting that the API doesn't link to the same collection anymore so it's not quite as cool when it works. But it's an incredible solution so thanks again Xano.

[@EnesKab]

I believe some people are created to teach. And you are definately one of them sir. Thank you !

[@Jetisback00]

You definitely do a great job explaining this stuff. Thank you 🙏🏾

[@shock1766]

Perfect explanation and I especially appreciate that you show how you could do it even without Xano. Thank you very much

[@ryanshock22]

Whoa, mega helpful. You connected so many dots for me. Thank you!

[@deleted1891]

fantastic, easy to understand, and extremely useful video. thank you.

[@weimeng658]

Thanks. Where can one hide the API key though?

[@jamie_SF]

Also wondering this

[@ericschlo]

Excellent teaching!

[@kaicex]

good video.What about connecting a Filters and CMS Load of Finsweet. Is there will be a problem?

[@grantsenior3291]

Super helpful! Thank you.

[@nooksweetco]

Great stuff! What column type did you use on xano for the category? I'm trying to duplicate what you did to test

[@Tips-r-us]

Out of date, the flow doesnt match the web site, I can not find the API section.

[@sidhemraj2168]

can't find the restaurant detail page video!

[@amyaturner]

kzbin.info/www/bejne/ol65qaWbitifbLc

[@anthonymas846]

Great Video! Quick question... I'm noticing the source code that is linked in the video description is slightly different from the code in the video. Particularly in the "For Loop" part of the function. Just wondering why it's different and if both methods can work. I'm fairly new to JS and trying my best to learn. Thank you again so much for the product and tutorials. You guys are doing an amazing job!

[@UltimateP]

Hey this has been useful for a project, but I am wondering how can i display the data in the sample card if SOME database entries don't have an image? The data that is getting displayed in my project is user generated that is collected from a form and put into a Xanos table. Some users don't upload images, but this has meant that those entries don't get displayed in the sample card at all, unlike the data entries that included an image, which appear fine like in this video. I can only get the table entries without images to appear if i removed the code for injecting the image into the sample card, then all of the database entries appear (just without the images). Can i get the data without images to display into a second sample card or automatically set a default image for the data entries without images? Thanks, help would be greatly appreciated.

[@togotraining6621]

thank you sooo much for this!!

[@manzooriqbal8439]

Thankyou for your video, can you please make a video by which we can post the data from web flow to an external api ? thanks in advance

[@wheres_bears1378]

Can that JS snippet be used with any other pagebuilders/websites?

[@nocodebackend]

This was written specifically for Webflow, so it's likely that it would require some modification. What front-end are you working with?

[@matthawes5552]

Loved this video! How would you integrate an external api to link with the webflow CMS collection? So, in your example, you make the api call and push the names and description of Star Wars planets into the CMS collection?

[@benjamincarriou8497]

Thank you for this video, it's helpful ! How do you do the same with an API need an authentication ? Thx for our help :)

[@nocodebackend]

Hey you should check out our WMX video where we talk about using Webflow, Memberstack, and Xano for authentication in Webflow.

[@migsy-boy]

@@nocodebackend Unfortunately, the WMX doesn't cover how to make an API call from Webflow to a Xano 'autentication required' endpoint, authenticating with a JWE token. Is there any tutorial or video on how to do this? Thanks!

[@rashidi4]

@@migsy-boy - did you ever figure this out?

[@joe6776]

Did you ever figure this out bro?

[@l2xu_2000]

Hey, great video. Just want to add one thing. There are some API's out there that will be blocked by CORS policy. You wont be able to call these API's within the Webflow Frontend.

[@nocodebackend]

All Xano APIs are CORS enabled. Can you elaborate on why they would be blocked by Webflow? We haven't heard this feedback before.

[@MrTonyradford]

Thanks. Very helpful.

[@drahmedhussain6475]

What a nice video, , first time I can see a very well example with full of details; more options and clone in the full details. Thank you for the clarity and steps shows plus sufficient links which I might consider it the new method of teaching tutorial videos. One thing I found which is there is Plants link for the code is not valid anymore? Has it been changed?. How to see the code working in a panel. Also I 'd like to use the console.log in the code, cd you show me please. Keep on great jobs.

[@runningdrew6654]

Right on Brother.

[@xamznerol]

Thats awesome!

[@za1ruc]

Just curious, you had the javascript ready for us. For my own Xano projects, is there a way to auto-generate the javascript for webflow?

[@nocodebackend]

Hey za1ruc. Not that we're aware of since each use case is so different!

[@CCD-yp6hh]

Thank you for making this video. I have been trying to use the Open Weather API for a Webflow project and I could not figure out how to do it. Your video is super helpful. Could you please make a full function weather app using Webflow and Open Weather's api and post it? Just asking. 😃

[@jamesc5322]

Yes it’s quite simple nowadays

[@MK-oj8ol]

Looks like Visual Basic type development, but for browser instead of desktop. Old is new again.

[@vaibhavkhobragade9773]

Great!

[@dongronki]

Old school, not reactive solution

[@vishalllllll]

Great tutorial. Thank you!