I’m trying to connect an external API to my Webflow website and connect different pieces of data from the API to a specific divs within a section (the Stats and Results section).
Basically, I’ve got a section with sport statistics inside that I’m trying to have update automatically. I want to get data from here, pick specific statistics, and post those statistics to the pertaining divs (the ones with the class “Stats number wrap”).
Is this possible to do? I have practically zero experience with JavaScript, and all the tutorials I find seem to involve creating new elements as the JSON is loaded, rather than just pushing the data to the right box.
@Edward_Powell - there are two methods I can think of to do this and which route you go probably depends on how often the data needs to be updated and if you will be choosing a specific set of statistics.
The first method would be to use the API to create / update CMS items. So you would have a CMS collection for each player and create fields for each statistic you want to store on each player. For instance, you might have a name field, and then a field for 2021 Driving Distance, 2021 Driving Accuracy, etc… You could use a service like Zapier/Integromat for this or you could build your own application to do this. The downside is that the fields need to exist in the collection item schema prior to bringing over the data, so when 2022 stats come out you’ll have to update the item and you may run out of fields eventually.
It’s also possible you could pull all of the JSON into a field on the collection items and then use JavaScript to unpack it on the page, I’m not sure how scalable this is over time and it might slow your page down a lot.
There may be a more efficient way to do this that I’m not aware of or not thinking of.
But I believe you are going to want to have this data stored in Webflow in the CMS somewhere, so that you don’t have to make external API calls every time a page is loaded by the end user (which is the second option). I think you’ll run into a lot of issues going that route.
@sam-g - Thanks for your reply. Considering I just want to get statistics for one player, and I don’t need to store data from previous years just yet (i.e. I just want to display the most recent data of a selection of stats displayed by the API I linked above), I feel as if something closer to the second option might be better.
However, I see you mention that I could have a lot of issues there. Given that I’m only planning on making this API call on the homepage (and at most 1 other page), is it still a worse option in your opinion?
Thanks!
EDIT: I’ve also just remembered the very important fact that this site is being hosted on external servers and not on Webflow’s, so this makes using the Webflow CMS impossible…
@Edward_Powell - it kind of depends on the use case again. Let’s say you were running a site that pulled weather data that changes - you would want to ping the weather service api fairly regularly and update the data in your DB, you might even pull it each time a user requests the data and then set a TTL (time to live) until the data expires and needs to be pulled again.
If you provide more detail on exactly what you are looking to do I can provide more advice on the direction I would recommend.
@sam-g Basically I want the information in the Stats and Results section on my Old Home page to auto-update (see screenshot below) with information from the API behind this page, which seems to update each day or so.
If possible I would like the API call to be done and information displayed on page load, but I’m open to other solutions if there are any.
@Edward_Powell - I think you should update CMS items rather than pulling this data in real-time. It’s not going to change very often and you could set up a scheduled update to pull the data once every 24 hours or something.
Does the European Tour website have a any API Documentation? I was looking and did not see anything.
@sam-g - Ok thanks for the input. Would that be possible via Zapier, or only via custom code?
As for the API Documentation, I couldn’t find any either as I believe it’s a private in-house one. The link is one I grabbed from the developer console as I just wanted to play around with the data. That being said, before publishing the site I’m going to go directly to the European Tour and ask them for official permission/access so everything remains above board.
@Edward_Powell - it would be helpful to have their API Documentation. There should probably be an endpoint that allows you to request all players and probably a separate endpoint to then request the data on each individual player (although they could all be the same one). Without that you would need to know the ids of each player you want to track - which makes things much more manual.
Hey @sam-g It would be great if you give me information about pulling data from third-party API to webflow CMS.
Can I pull data from Coingecko API to directly Webflow CMS and remember the data will be changed every hour or 24 hour. So is it possible that when data changes in the API it will automatically change on the CMS too ??
