angular - 如何从 GET 响应（数组）中获取特定属性

问题描述

我有来自 API 的这个 GET 数组响应，我想遍历它：

[
  {
   "Version":1,
    "Key":"215854",
    "Type":"City",
     "Rank":31,
     "LocalizedName":"Tel Aviv",
      "Country":{
            "ID":"IL",
            "LocalizedName":"Israel"
        },
        "AdministrativeArea":{
            "ID":"TA",
             "LocalizedName":"Tel Aviv"
        }
   }
]

我想获得确切的属性作为我的界面：

export interface citySearch
    {
    Key:String,
    LocalizeName:String,
    Country:{
        LocalizeName:String
        }   
    }

服务

import {citySearch} from '../interfaces/citySearch.model'


export class WeatherService {



  constructor(public http: HttpClient) { }

  getLocation(query:String):Observable<citySearch>{
    return this.http.get<citySearch>(`http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=${this.apikey}&q=${query}&language=en-us`)
.pipe(
      map((receivedData:citySearch)=>{
        return receivedData
      }
    ))
  }
}

组件.ts

export class TestComponent implements OnInit {

  citySearch!: citySearch;

  constructor(public weatherService:WeatherService) { }

  ngOnInit(): void {
    this.weatherService.getLocation("tel aviv").subscribe((data:citySearch)=>{
      this.citySearch = data
      console.log("this.citySearch:", this.citySearch);
    })
  }


}

如何映射响应以获取接口的特定属性？

谢谢！

标签： angularget

import {citySearch} from '../interfaces/citySearch.model'


export class WeatherService {
  constructor(public http: HttpClient) { }

  getLocation(query:String):Observable<citySearch>{
    return this.http.get<citySearch>(`http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=${this.apikey}&q=${query}&language=en-us`)
.pipe(
      map(items => items.map({Key, LocalizeName, Country }:citySearch) => {
        return {Key, LocalizeName, Country: {LocalizeName: Country. LocalizedName}};
      }
    )))
  }
}

在您的地图功能中，您可以映射每个项目，请记住来自 rx/js 的地图 fn 与 javascript Array.map 不同

angular - 如何从 GET 响应（数组）中获取特定属性

问题描述

解决方案

推荐阅读