Question

Openweatherapi这样返回json：

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

但是我只需要这样的信息：

export class WeatherInfo{
    constructor(
                public name: string, 
                public description: string,
                public temperature: number){
                      this.name = name;
                      this.description = description;
                      this.temperature = temperature;


  }

}

这是我的api服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import {environment} from '../environments/environment';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getWeatherByCity(city): Observable<any>{
    const httpParams: HttpParams = new HttpParams().set('q',city).set('appid',environment.ApiKey).set('units',environment.ApiUnits);

    return this.http.get(environment.ApiUrl, {params: httpParams});

  }

  private handleError (error: any) {
    let errMsg: string;
      errMsg = error.message ? error.message : error.toString();

    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

我可以在控制台日志中看到响应，但是无法在浏览器中显示

And my app.component.class
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { WeatherInfo } from './weather-info';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  weather: WeatherInfo;

  data: string;

  title = 'Pogoda';

  constructor(private api: ApiService) {}

  ngOnInit(){
    this.getWeather();
  }

  getWeather(){
    this.api.getWeatherByCity('Bydgoszcz').subscribe(
      res => {
        this.data = res;
        console.log(this.data);
      }
    );
  }

我的目标是获取json数据并将其解析为weather-info对象。我只需要此类课程中的信息。

Answer 1

您可以使用rxjs map方法来投影api调用的返回值。通常，您应该在服务中做到这一点：

 return this.http
      .get(environment.ApiUrl, {params: httpParams})
      .pipe(map((data: any) => 
       { 
          /** Build your custom object to return **/
          /** const customObject = { id: data.id };
          /** return customObject;
       });

有关更多信息，请参见https://www.learnrxjs.io/operators/transformation/map.html

如何仅从json响应中获取一些信息？

1 个答案: