Forum Discussion

Paul Chapman's avatar
Paul Chapman
Iron Contributor
Apr 05, 2018

SPFX webpart - cannot call function in bundled library weather.js

Hello,

 

I'm trying to get to grips with SPFX, specifically a basic webpart using weather.js () based on OpenWeatherMap.org. I wonder if anyone can help? Here is where I've got to... using Visual Code.

 

Running the npm command below adds weather.js under node_modules in my spfx webpart project.

npm install -g weather.js

I then followed Bundle a Script to create my own Typings which I can reference in my webpart.

I have 3 typings so far, see below. (Spoiler: I really don't get Typings)

declare module "weather.js" {
export function getCurrent(city: string): string;
export function getApiKey();
export function setApiKey(apikey: string): string;
 }

getApiKey and setApiKey work fine, I can set the key and then display it on the webpart. My problem is getCurrent which, when I call .getCurrent("London") for instance, returns 'Object: object' on the screen. 

 

The getCurrent code is below, and clearly expects more than just a string, and it also clearly outputs more than a string. If I change my typing to output JSON, which I am pretty sure is what the API sends back, then I get a 'you can't assign type JSON to a type string' error, which is fair enough.

Weather.getCurrent = function (city, callback) {
var url = "blah";
return this._getJSON(url, function (data) {
callback(new Weather.Current(data));
} );
};

Can someone give me a clue or point me in the right direction? I think I need to call getCurrent with a city string AND a function that can then get the specific data back, such as min temperature, etc. But I cannot work out what that should look like. 

 

Appreciate any help, apologies if I've not explained it well, still learning...

 

Paul

 

 

  • Steve Johnson's avatar
    Steve Johnson
    Copper Contributor
    I too am new to SPFx, but when I’ve had dependency files (JS, CSS), I’ve usually put them in the SRC folder, not the node_modules one.

    Not sure if that makes a difference?

    Not sure if that makes a difference.
    • Paul Chapman's avatar
      Paul Chapman
      Iron Contributor

      Hi Steve,

       

      Always nice to meet another noob (although I bet I am noober than you).

       

      I don't know if your suggestion would make a difference really. The node_modules is just where the npm install command placed the library. As I say, I can already call 2 functions (setApi and getApi) ok so I don't think it's the issue. But you may be right.  I'd still have the problem of 'how do I actually call .getCurrent?', with just a string? With a string and a function? Answers on a postcard...

       

      Thanks for the suggestion, I may well give it a go, certainly in my next spfx project.

  • Paul Chapman's avatar
    Paul Chapman
    Iron Contributor
    Not sure how useful it is to say but I ended up not using weather.js, and instead made a direct API call to OpenWeather.org, which I managed to get working.

Resources