了解如何调用REST Api并在Angular 2中显示响应中的数据

Question

I'm new in Angular 2 and Typescript so please excuse me for this question but I can't understand how to consume the data after successfully calling a REST Api. I made a plunker for my example so it will be easier to explain what I'm tring to do.

Please ignore unused imports when viewing the example.

Calling the function getWeather works fine.

getWeather(query) {
        const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
        return this.http
            .get(endpoint)//, {search: searchParams})
            .map(res => res.json().main)
            .subscribe(res => console.log('weather json response = ' + JSON.stringify(res))
            );
    }

But how to store the data? I mean do I have to make an object similar like the json response and use if for displaying the data and how?

Edit: Here is a working example with my code.

Answer 1

When reverting the data, you simply need to set them as property of the component using the this keyword.

In the case of HTTP request, the data are there when the first callback registered using the subscribe method is called.

Using an arrow function to define this callback allows to use the component instance through the this keyword (contextual this in this case).

getWeather(query) {
  const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
  return this.http
      .get(endpoint)//, {search: searchParams})
      .map(res => res.json().main)
      .subscribe(res => {
        this.weather = data;
       });
}

Then the template can reference such properties to display data with ngFor, {{…}} or interpolation. Be careful to handle the asynchronous aspect of observable with for example the async pipe, ngIf or the Elvis operator (?).

<div>{{weather?.someProperty}}</div>

Answer 2

You could indeed make a class that models the json response and cast to it, or just use it as an any and use the dot-notation to extract and display the data. Just add a field and assign the response to it. Like this:

countryData: any;

getWeather(query) {
    const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
    return this.http
        .get(endpoint)//, {search: searchParams})
        .map(res => res.json().main)
        .subscribe(res => this.countryData = res)
        );
}

If you want to model it as a class beforehand you can do that too:

countryData: Country;

getWeather(query) {
    const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
    return this.http
        .get(endpoint)//, {search: searchParams})
        .map(res => res.json().main)
        .subscribe(res => this.countryData = <Country>res)
        );
}

Beware however that if you use the second method and cast to Country or whatever you name your class, that it won't have any methods available that you defined on that class.