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

Поделиться
HTML-код
  • Опубликовано: 8 сен 2024

Комментарии • 44

  • @user-ft2md2gd4s
    @user-ft2md2gd4s 3 года назад +13

    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
    @rolandlopez7763 10 месяцев назад +2

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

  • @areeb9582
    @areeb9582 2 года назад +1

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

  • @SpeerAndrew
    @SpeerAndrew 9 месяцев назад

    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
    @EnesKab Год назад

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

  • @taylorjackson3691
    @taylorjackson3691 Год назад +2

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

  • @shock1766
    @shock1766 2 года назад

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

  • @ryanshock22
    @ryanshock22 3 года назад +1

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

  • @ericschlo
    @ericschlo 8 месяцев назад

    Excellent teaching!

  • @deleted1891
    @deleted1891 3 года назад

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

  • @grantsenior3291
    @grantsenior3291 3 года назад +1

    Super helpful! Thank you.

  • @anthonymas846
    @anthonymas846 3 года назад +3

    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!

  • @togotraining6621
    @togotraining6621 7 месяцев назад

    thank you sooo much for this!!

  • @drahmedhussain6475
    @drahmedhussain6475 2 года назад

    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.

  • @MrTonyradford
    @MrTonyradford 3 года назад

    Thanks. Very helpful.

  • @benjamincarriou8497
    @benjamincarriou8497 3 года назад +5

    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
      @nocodebackend  3 года назад +3

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

    • @migsy-boy
      @migsy-boy 3 года назад +2

      @@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
      @rashidi4 3 года назад +1

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

    • @joe6776
      @joe6776 Год назад

      Did you ever figure this out bro?

  • @kaicex
    @kaicex 3 месяца назад

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

  • @manzooriqbal8439
    @manzooriqbal8439 3 года назад +1

    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

  • @nooksweetco
    @nooksweetco 9 месяцев назад

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

  • @CCD-yp6hh
    @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
      @jamesc5322 11 месяцев назад

      Yes it’s quite simple nowadays

  • @weimeng658
    @weimeng658 2 года назад +2

    Thanks. Where can one hide the API key though?

    • @jamie_SF
      @jamie_SF Год назад

      Also wondering this

  • @runningdrew6654
    @runningdrew6654 2 года назад

    Right on Brother.

  • @matthawes5552
    @matthawes5552 3 года назад

    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?

  • @xamznerol
    @xamznerol 2 года назад

    Thats awesome!

  • @l2xu_2000
    @l2xu_2000 2 года назад

    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
      @nocodebackend  2 года назад

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

  • @Tips-r-us
    @Tips-r-us 3 месяца назад

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

  • @sidhemraj2168
    @sidhemraj2168 3 года назад +1

    can't find the restaurant detail page video!

    • @amyaturner
      @amyaturner 2 года назад

      ruclips.net/video/l-VxreUsl6U/видео.html

  • @UltimateP
    @UltimateP 2 года назад

    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.

  • @vaibhavkhobragade9773
    @vaibhavkhobragade9773 3 года назад

    Great!

  • @MK-oj8ol
    @MK-oj8ol Год назад

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

  • @wheres_bears1378
    @wheres_bears1378 2 года назад

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

    • @nocodebackend
      @nocodebackend  2 года назад

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

  • @za1ruc
    @za1ruc 2 года назад

    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
      @nocodebackend  2 года назад

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

  • @dongronki
    @dongronki Год назад

    Old school, not reactive solution

  • @vishalllllll
    @vishalllllll Год назад

    Great tutorial. Thank you!