如何从 GET 响应数组中获取特定属性

如何解决如何从 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
      }
    ))
  }
}

Component.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);
    })
  }


}

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

谢谢！

解决方法

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,Country: {LocalizeName: Country. LocalizedName}};
      }
    )))
  }
}

在你的 map 函数中你可以映射每个项目，记住来自 rx/js 的 map fn 与 javascript Array.map 不同