在Angular中存储和处理来自httpClient get请求的JSON数据的最佳方法

Question

我是 Angular 的新手，我正在使用 Ionic Angular 开展一个项目。我的目标是使用 httpClient 并将 get 请求发送到 Country api，该 API 将向我发回所有国家/地区的 JSON。我用于存储数据的方式是创建一个与我接收的数据类型匹配的接口，然后订阅该 observable 并将数据存储到我定义的数据类型的数组中。

但是对于国家来说，我唯一需要的就是名称，是否可以将每个国家的名称存储到一个数组中而无需定义接收 JSON 对象的结构，因为它非常长且复杂。

这是我想要做的代码：

将国家设为 Observable。在 Country.Service 文件中

  getCountry(): Observable<any>{
    return this.http.get<any>(this.url2);
  }

声明变量并存储国家数据：

public countries: any;

  storeCountry(){
    this.countryService.getCountry().subscribe(
      data => {
        this.countries = data;
      }
    );

这是我想要做的，但是当我控制台记录显示为未定义的国家时，我无法将数据放入国家变量中以将其作为数组访问。

对于我想要实现的目标，最好的方法是什么？我会很感激任何帮助，

Answer 1

我假设您从后端收到的数据是结构

countries = [
  { 'name': 'USA', 'id': '1', ... },
  { 'name': 'UK', 'id': '2', ... },
  ...
]

在这种情况下，您可以从 GET 请求中删除 <any> 并使用 map() 方法仅获取国家/地区名称作为数组。试试下面的

服务

import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';

getCountry(): Observable<any>{
  return this.http.get(this.url2).pipe(map(countries => countries.map(country => country.name);
}

说明

如果您也是 Rxjs 的新手，那么您可能会对为什么有两个 map 函数感到困惑。

1. pipe(map()) 部分属于 Rxjs。

   • pipe() 函数可用于修改和控制使用各种Rxjs operators 的数据流。
   • 我们只使用一个运算符 map()，它将自定义函数投射到源 observable（从 API 返回的 JSON）上，并将结果值作为 observable 返回。

2. 我们使用countries.map() 中的map() 函数来提供我们的自定义投影函数。它根据我们的回调创建一个新数组，以仅使用源对象数组的name 属性。

然后你可以在组件中订阅它

storeCountry(){
  this.countryService.getCountry().subscribe(
    countries => {
      this.countries = countries; // this.countries = ['USA', 'UK', ...]
    },
    error => {
      // handle error
    }
  );
}