How to add Weather API to Wix webiste?

Ask the community
,
1

Hi.

I followed the tutorial here: https://support.wix.com/en/article/corvid-accessing-third-party-services-with-the-fetch-api

But i can’t seem to get it to work. I’m testing out the https://www.apixu.com weather api purely as i’m a novice with this and im trying to learn new skills with wix.

I created the button, search bar ( User input ) and a text box for the results to show in. I then named them all accordingly. I also created a data sheet and added the both text data, but wasn’t sure if i needed to add another one for the button? If so, what field type do i use?

Here is the page code i used:
//Form’s page code import {getCurrentTemp} from ‘backend/serviceModule’; //… export function buttonFetchTemp_click(event) { getCurrentTemp($w(“#textInputCity”).value) .then(temp => $w(“#textTemp”).text = temp + “°”); }

and here is the backend code i used

 //serviceModule.jsw 
import {fetch} from 'wix-fetch';    
export function getCurrentTemp(city) {  
const url = 'https://api.openweathermap.org/data/2.5/weather?q=';  
const key = '<api key placeholder>';   
let fullUrl = url + city + '&appid=' + key + '&units=imperial';    
return fetch(fullUrl, {method: 'get'})     
.then(response => response.json())     
.then(json => json.main.temp); }

Can anyone help with this please?

2

On your page code, it looks like you have not added the page’s onReady function after your imports call.

You can just use the Wix Weather app.
https://support.wix.com/en/article/adding-and-setting-up-the-wix-weather-app

Or have a look at this already set up Wix Editor tutorial for Weather.
https://www.wix.com/corvid/example/create-a-weather-widget

Have you read their own support info about using API and NodeJS?
https://www.apixu.com/doc/

Also, as they do their own NodeJS, so I would see if Wix already let you use that node through their own package manager.
https://github.com/apixu/apixu-nodejs
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager

Off topic now, however you can also download their own images too.
https://www.apixu.com/doc/weather-conditions.aspx