How do I call an Api in a provider using a promise and HttpClient

Question

I recently began to use Angular with Ionic, I'm trying to do a simple app and at some point I want it to use a weather API (I chose openweathermap). So here is what I tried to do:

I created a provider called meteo.provider.ts:

import { Injectable } from '@angular/core';
import {Meteo, Weather} from "../model-class/model-class";
import { HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map'

@Injectable()
export class MeteoProvider {

//Meteo url
private meteoServiceUrl = 'http://api.openweathermap.org/data/2.5/weather?id=6455645&units=metric&appid=mykey';

constructor(public http: HttpClient) {
    console.log('Hello MeteoProvider Provider');
}

getMeteo():Promise<Meteo> {
    return this.http.get(this.meteoServiceUrl).toPromise()
        .then(data => { this.Meteo = data});
}
}

I tried to create a modal class for the element on the weather API

    export class Meteo {
        coord: Coord;
        weather: Weather;
        main: Main;
        id: number;
        name: string;
    }

    export class Coord {
       lat: number;
       lon: number;
    }

    export class Weather {
       id: number;
       main: string;
       description: string;
       icon: string;
    }

    export class Main {
       temp : number;
       pressure: number;
       humidity: number;
    }

Here is how I tried to call it in my home.ts

    import { Component } from '@angular/core';
    import {NavController, NavParams} from 'ionic-angular';
    import {BateauPage} from "../bateau/bateau";
    import {MuseePage} from "../musee/musee";
    import {MeteoPage} from "../meteo/meteo";
    import {TemoignagePage} from "../temoignage/temoignage";
    import {MeteoProvider} from "../../providers/meteo/meteo.provider";
    import {Meteo} from "../../providers/model-class/model-class";

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
        meteo: Meteo;
        constructor(public navCtrl: NavController, public navParams: NavParams, public meteoProvider: MeteoProvider) {

        }

      ngOnInit() {
     /* this.meteoProvider.getMeteo().subscribe(meteo=>{
      console.log(this.meteo);
      });*/

    }

I'm getting errors so I know my method is not correct, but I'm not really sure if I understand the process. Maybe I didn't completely get how promise works.

I'm not really sure of how to present it, because when I search I see a tonne of different methods to call API but somehow I manage to not make them work.

Answer 1

The problem is that you are mixing Observables with Promises. Just stick to observables. You return a Promise from your service, and then you try to subscribe to it in the component. You subscribe to observables, and you then promises.

service.ts

getMeteo(): Observable<Meteo> {
    return this.http.get(this.meteoServiceUrl);
}

component.ts

ngOnInit() {
 this.meteoProvider.getMeteo().subscribe(meteo =>{
   this.meteo = meteo;
  });
}