0

I want to build a website using 2 API's. I've made 2 separate Classes for each api. I need to get 'data.currently.icon' outside getWeather() and class Weather. I was trying everything variables outside scope, getters&setters. How can I solve it?

class Weather {
  constructor() {
    this.getLocation();
    this.lat;
    this.lng;
    this.icon;
  } // end constructor

  getLocation() {
    navigator.geolocation.getCurrentPosition(
      this.myLocation.bind(this),
      this.errorLocation.bind(this)
    );
  }

  myLocation(result) {
    this.lat = result.coords.latitude;
    this.lng = result.coords.longitude;
    //console.log(this.lat);
    this.getWeather();
  }

  getWeather() {

    let url = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/15684c4ffc14f32fcd28af8aa81bc818/${this.lat},${this.lng}?units=si`
    fetch(url).then(response => {
      //get json 
      return response.json();
    }).then(data => {
      document.querySelector('#test').innerHTML = data.currently.summary;
      document.querySelector('#test2').innerHTML = data.currently.temperature + "deg";
      //data.currently.icon
    }).catch(err => {
      console.log(err);
    });
  };

  errorLocation(err) {
    console.log(err);
  }

} // end class Weather
let weather = new Weather();
console.log(icon);
Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • `getWeather()` is asynchronous. Even if you could access the variable, it won't be available immediately after you call `new Weather()` because the asynchronous call hasn't returned yet. – Barmar Mar 23 '20 at 23:13
  • What is supposed to be the `result` param of `myLocation()`? – Diego Saravia Mar 23 '20 at 23:22
  • @DiegoSaravia result is object GeolocationPosition –  Mar 23 '20 at 23:27

1 Answers1

0

Where you wrote //data.currently.icon it could say 

this.icon = data.currently.icon;
return Promise.resolve(this.icon);

And that last line would allow you to do the following: 

let weather = new Weather();
weather.getWeather().then(icon => console.log(icon));

And you must add return before the fetch(...) so that getWeather() returns a Promise which in turn allows for then to be executed after the data is fetched.

edu
  • 153
  • 1
  • 7
  • Cannot read property 'then' of undefined. –  Mar 23 '20 at 23:32
  • Yeah, that makes sense now that I think of it, getWeather() is not returning a Promise, let me think about it a little bit more – edu Mar 23 '20 at 23:39
  • Try adding `return ` before the `fetch(url)` (and using the rest of the changes in my answer as well) – edu Mar 23 '20 at 23:49
  • now it just 'undefined' –  Mar 24 '20 at 00:07
  • Are you sure that `data.currently.icon` has a value in it? If you console.log inside the `then` you should be able to see its value after the data gets fetched. – edu Mar 24 '20 at 00:13
  • I can consol.log data.currently.icon from fetch –  Mar 24 '20 at 00:18
  • I created a fiddle, see if it is of any help: https://jsfiddle.net/w3xscd5h/ – edu Mar 24 '20 at 00:40
  • It works perfectly! Thank you for your time and help.! –  Mar 24 '20 at 00:44
  • You're welcome! Can I ask you what you had to do in the end? So I can edit my answer for other people that might have the same problem – edu Mar 24 '20 at 00:50
  • I need to compare the value of data.current.icon with my other object. If it matches I will use value of the object to get img from other API. I need to know what weather is today(api) to display right picture(api) for this kind of weather. –  Mar 24 '20 at 01:08
  • Oh, sorry, my question wasn't clear, I meant what you had to do to solve the problem, so I can edit the answer correctly. I'll add now the return before the fetch expression. – edu Mar 24 '20 at 01:17