Return 类型为 "locality" 的项目的 "long_name"

Question

我正在尝试为具有 types === "locality" 的项目打印出 long_name。我正在使用 Angular 和 httpClient，这使得一个可观察的。我迷失在 rxjs 和 js 的复杂性中。有人可以帮忙吗？

服务：

getGoogleGeo2(postalCode: string) {
    return this.http
      .get(`https://maps.googleapis.com/maps/api/geocode/json?address=${postalCode}ES&key=${api}`)
      .pipe(map(<T>(item) => item.results[0].address_components));
  }

组件：

this.geoService.getGoogleGeo2(postalCode).subscribe((item) => console.log(item));

我在我的 console.log 中得到这个：

[
  { long_name: "08820", short_name: "08820", types: ["postal_code"] },

  { long_name: "El Prat de Llobregat", short_name: "El Prat de Llobregat", types: ["locality", "political"] },
];

在我的组件中，我需要保存值 El Prat de Llobegrat，然后在 html 中使用。

Answer 1

数组查找将 return 您在其回调中匹配所需条件的对象。前 :-

this.geoService.getGoogleGeo2(postalCode).subscribe((item) => 
          console.log(item.find((value)=>value.types.includes("locality")).long_name)
);

Answer 2

你走在正确的轨道上

下一步是 filtering

您可以在 rxjs 的 pipe 行期间或在值已发出后执行此操作

我怀疑你在管道中想要它

然后在 rxjs pipe 过程中扩展当前的 map，或者将另一个 map 添加到链中，并在那里添加过滤器：

.pipe(
  map(<T>(item) => item.results[0].address_components.filter(value => value.types.includes('locality'))
);

或

.pipe(
  map(<T>(item) => item.results[0].address_components),
  // another item in the pipeline
  map(values => values.filter(value => value.types.includes('locality'))
)

Return 类型为 "locality" 的项目的 "long_name"

Return the "long_name" for the item that has types "locality"

httpclient

subscribe

rxjs

angular

rxjs-observables