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

Question

我正在调用一个返回JSON对象的API.我只需要数组的值来映射到Observable.如果我调用api只返回数组我的服务调用工作.

以下是我的示例代码..

// my service call ..
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Show} from '../models/show';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class MyService {

  constructor(private http: HttpClient ) { }


  findAllShows(): Observable<Show[]> {
    return this.http
      .get<Show[]>(`${someURL}/shows`)
  }
}

如果返回的是JSON对象,如下面的那个失败..

// Service API that FAILS ...
{
  "shows": [
    {
      "id": "123f9165-80a2-41d8-997a-aecc0bfb2e22",
      "modified": "2017-08-13 15:54:47",
      "name": "Main Show1"
    },
    {
      "id": "456f9165-80a2-41d8-997a-aecc0bfb2e22",
      "modified": "2017-08-14 15:54:47",
      "name": "Main Show2"
    },
    {
      "id": "789f9165-80a2-41d8-997a-aecc0bfb2e22",
      "modified": "2017-08-17 15:54:47",
      "name": "Main Show3"
    }
  ]
}

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

// Service API that Works ...
[
    {
      "id": "123f9165-80a2-41d8-997a-aecc0bfb2e22",
      "modified": "2017-08-13 15:54:47",
      "name": "Main Show1"
    },
    {
      "id": "456f9165-80a2-41d8-997a-aecc0bfb2e22",
      "modified": "2017-08-14 15:54:47",
      "name": "Main Show2"
    },
    {
     "id": "789f9165-80a2-41d8-997a-aecc0bfb2e22",
      "modified": "2017-08-17 15:54:47",
      "name": "Main Show3"
    }
  ]

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

Answer 1

您可以简单地使用.map()http调用Observable来返回所需的数据类型.

findAllShows(): Observable<Show[]> {
    return this.http
        .get(`${someURL}/shows`)
        .map(result=>result.shows)
}

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

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

Answer 2

没有方法HttpClient应该使用的最新版本。您应该先通过导入， 然后以这种方式使用它：httpmapimport { map } from 'rxjs/operators';

this.http.get(`${someURL}/shows`).pipe(
        map(res => res['shows'])
    )

Answer 3

谢谢大家，通过提供服务器发回的传输对象接口，我能够通过组合来自@Arun Redhu 的响应来找到解决方案。然后@CozyAzure 提供的解决方案通过使用 .map() 将一个 Observable 转换为正确的 Observable Show[]。

下面的完整解决方案供感兴趣的人使用。

import {Observable} from 'rxjs/Observable';
import {Contact} from '../models/show';
import {environment} from '../../../environments/environment';
// Use the new improved HttpClient over the Http
// import {Http, Response} from '@angular/http'; 
import {HttpClient} from '@angular/common/http';

// Create a new transfer object to get data from server
interface ServerData {
  shows: Show[];
}

@Injectable()
export class ShowsService {

  constructor(private http: HttpClient ) { }

// want Observable of Show[]
  findAllShows(): Observable<Show[]> {  
    // Request as transfer object <ServerData>
    return this.http
      .get<ServerData>(`${apiURL}/shows`)
     // Map to the proper Observable I need 
      .map(res => <Show[]>res.shows); 

  }
}

现在一切都好！！！谢谢 。因此，根据返回的数据，我可以直接使用或映射到我需要的适当 Observable。