laris (5) [Avatar] Offline
#1
Hi,

I have got an appid and changed the code accodingly but it did not work:

Can't get weather. Error code: undefined, URL: http://api.openweathermap.org/data/2.5/weather?q=M&units=imperial&APPID=5521f67a469d0a177b7c562f38b9f1dc

private urlSuffix: string = "&units=imperial&APPID=5521f67a469d0a177b7c562f38b9f1dc";

I use intelliJ.

What have I done wrong?

regards

Laura
Yakov Fain (208) [Avatar] Offline
#2
During the last year, that weather server has changed the API and I updated the code accordingly. Try the code from this example using my app id first and see if it works. Also, try entering the full URL for any city in the browser and see if you're getting the data back.
Last week I was running a workshop and this example worked just fine.

import { Component } from '@angular/core';

import {Observable} from 'rxjs/Observable';

import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import {FormControl} from "@angular/forms";
import {Http} from "@angular/http";

@Component({
  selector: "app-root",
  template: `
      <h2>Observable weather</h2>
      <input type="text" placeholder="Enter city" [formControl]="searchInput">
      <h3>{{temperature}}</h3>
    `
})
export class AppComponent {
  private baseWeatherURL: string= 'http://api.openweathermap.org/data/2.5/weather?q=';
  private urlSuffix: string = "&units=imperial&appid=ca3f6d6ca3973a518834983d0b318f73";

  searchInput: FormControl = new FormControl();
  temperature: string;

  constructor(private http:Http){

    this.searchInput.valueChanges
      .debounceTime(200)
      .switchMap(city => this.getWeather(city))
      .subscribe(
        res => {
          if (res['cod'] === '404') return;
          if (!res['main']) {
            this.temperature ='City is not found';
          } else {

            this.temperature =
              `Current temperature is  ${res['main'].temp}F, ` +
              `humidity: ${res['main'].humidity}%`;
          }
        },
        err => console.log(`Can't get weather. Error code: %s, URL: %s`, err.message, err.url),
        () => console.log(`Weather is retrieved`)
      );
  }

  getWeather(city: string): Observable<Array<string>> {
    return this.http.get(this.baseWeatherURL + city + this.urlSuffix)
      .map(res => {
        console.log(res);
        return res.json()});
  }
}




laris (5) [Avatar] Offline
#3
Yakov,
thank you.
I am behind a firewall...
It sort of works for one city..
second one returns error:
GET http://api.openweathermap.org/data/2.5/weather?q=&units=imperial&APPID=5521f67a469d0a177b7c562f38b9f1dc 502 (Bad Gateway)
(anonymous) @ VM235:2
scheduleTask @ zone.js:1960
ZoneDelegate.scheduleTask @ zone.js:349
onScheduleTask @ zone.js:237
ZoneDelegate.scheduleTask @ zone.js:343
Zone.scheduleTask @ zone.js:192
Zone.scheduleMacroTask @ zone.js:206
(anonymous) @ zone.js:1984
send @ VM256:3
(anonymous) @ http.umd.min.js:15
Observable._trySubscribe @ Observable.ts:113
Observable.subscribe @ Observable.ts:98
MapOperator.call @ map.ts:50
Observable.subscribe @ Observable.ts:96
subscribeToResult @ subscribeToResult.ts:33
SwitchMapSubscriber._innerSub @ switchMap.ts:108
SwitchMapSubscriber._next @ switchMap.ts:100
Subscriber.next @ Subscriber.ts:95
DebounceTimeSubscriber.debouncedNext @ debounceTime.ts:99
dispatchNext @ debounceTime.ts:117
AsyncAction._execute @ AsyncAction.ts:121
AsyncAction.execute @ AsyncAction.ts:96
AsyncScheduler.flush @ AsyncScheduler.ts:33
ZoneDelegate.invokeTask @ zone.js:363
onInvokeTask @ core.umd.min.js:14
ZoneDelegate.invokeTask @ zone.js:362
Zone.runTask @ zone.js:166
ZoneTask.invoke @ zone.js:416
data.args.(anonymous function) @ zone.js:1527
observable-events-http.ts:46 Can't get weather. Error code: undefined, URL: http://api.openweathermap.org/data/2.5/weather?q=&units=imperial&APPID=5521f67a469d0a177b7c562f38b9f1dc

I am OK with this. May get it second time around smilie
regards
Laura
Yakov Fain (208) [Avatar] Offline
#4
I'm glad it worked.

On the side note, I noticed a small bug in that example. If you want it to work for the second city, highlight the first city in the input field, hit the backspace button and start typing the name of another city.
Joez (2) [Avatar] Offline
#5
First request is going well without problem.

After I do a clear on the input box, the page got stuck.


Here is the error message in the console :

GET http://api.openweathermap.org/data/2.5/weather?q=&units=i zone.js:2019 GET http://api.openweathermap.org/data/2.5/weather?q=&units=imperial&appid=ca3f6d6ca3973a518834983d0b318f73 400 (Bad Request)

Can't get weather. Error code: undefined, URL: http://api.openweathermap.org/data/2.5/weather?q=&units=imperial&appid=ca3f6d6ca3973a518834983d0b318f73
Yakov Fain (208) [Avatar] Offline
#6
After the book was published, the API from that weather server was changed a couple of times. At some point, we've added error processing (the catch operator) to handle 404. See if this code works:

https://github.com/Farata/angular2typescript/blob/master/extras/observables/src/app/http/app.component.ts

Joez (2) [Avatar] Offline
#7
Thanks for the quick reply.

Just a small thing: changed the error code from 404 to 400.

After the change, everything works!