arrays – Angular – HttpClient:Map将方法对象结果映射到数组属性

前端之家收集整理的这篇文章主要介绍了arrays – Angular – HttpClient:Map将方法对象结果映射到数组属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在调用一个返回 JSON对象的API.我只需要将数组的值映射到Observable.如果我调用api只返回数组我的服务调用工作.

以下是我的示例代码..

  1. // my service call ..
  2. import { Injectable } from '@angular/core';
  3. import {Observable} from 'rxjs/Observable';
  4. import {Show} from '../models/show';
  5. import {HttpClient} from '@angular/common/http';
  6.  
  7. @Injectable()
  8. export class MyService {
  9.  
  10. constructor(private http: HttpClient ) { }
  11.  
  12.  
  13. findAllShows(): Observable<Show[]> {
  14. return this.http
  15. .get<Show[]>(`${someURL}/shows`)
  16. }
  17. }

如果返回是一个JSON对象,如下面这个失败..

  1. // Service API that FAILS ...
  2. {
  3. "shows": [
  4. {
  5. "id": "123f9165-80a2-41d8-997a-aecc0bfb2e22","modified": "2017-08-13 15:54:47","name": "Main Show1"
  6. },{
  7. "id": "456f9165-80a2-41d8-997a-aecc0bfb2e22","modified": "2017-08-14 15:54:47","name": "Main Show2"
  8. },{
  9. "id": "789f9165-80a2-41d8-997a-aecc0bfb2e22","modified": "2017-08-17 15:54:47","name": "Main Show3"
  10. }
  11. ]
  12. }

现在这个可以工作,如果我只是返回数组

  1. // Service API that Works ...
  2. [
  3. {
  4. "id": "123f9165-80a2-41d8-997a-aecc0bfb2e22",{
  5. "id": "789f9165-80a2-41d8-997a-aecc0bfb2e22","name": "Main Show3"
  6. }
  7. ]

如何将JSON对象Observable映射到数组Observable ???

你可以简单地.map()你的http调用,它是一个Observable,来返回你想要的数据类型.
  1. findAllShows(): Observable<Show[]> {
  2. return this.http
  3. .get(`${someURL}/shows`)
  4. .map(result=>result.shows)
  5. }

你的httpClient.get()应该返回一个Observable,你已经明确表示它认为Observable< Show []>.你.map()是一个将observable转换为新的observable的运算符.

有关.map()运算符的更多信息:http://reactivex.io/documentation/operators/map.html

猜你在找的Angularjs相关文章