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

我正在调用一个返回JSON对象的API。我只需要数组的值就可以映射到一个可观察对象。如果我调用只返回数组的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`)
  }
}

现在如果我返回数组，这个就可以了

// 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对象映射到可观察的数组？？？

您可以简单地

.map（）

您的http调用，这是一个

可观察的

，以返回您想要的数据类型

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

---

有两种方法可以做到这一点。您可以使用

.map

操作符将一种类型的可观察对象映射到另一种类型，第二种方法仅在界面的帮助下包括

第一种方法（借助于

.map

）

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
接口项响应对象{
id:string，
修改：字符串，
名称：string
}
接口项响应{
显示：数组；
}
@可注射（）
导出类应用程序服务{
构造函数（私有http:HttpClient）{}
getData（）：可观察{
返回此.http.get（'api/api data.json'）
.map（res=>res.shows）；
}
}

在第二种方法中，借助于包装接口

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

interface ItemsResponseObj {
    id: string,
    modified: string,
    name: string
}

interface ItemsResponse {
    shows: Array<ItemsResponseObj>;
}

@Injectable()
export class AppService {

    constructor(private http: HttpClient) { }

    getData(): Observable<ItemsResponse> {
        return this.http.get<ItemsResponse>('api/api-data.json')
    }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
接口项响应对象{
id:string，
修改：字符串，
名称：string
}
接口项响应{
显示：数组；
}
@可注射（）
导出类应用程序服务{
构造函数（私有http:HttpClient）{}
getData（）：可观察{
返回此.http.get（'api/api data.json'）
}
}

谢谢大家， 我通过提供服务器发回的传输对象接口，结合@Arun Redhu的响应，找到了解决方案。然后@CozyAzure提供的解决方案是使用.map（）将一个可观察对象转换为正确的可观察显示[]

下面为感兴趣的人提供完整的解决方案

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); 

  }
}

从'rxjs/Observable'导入{Observable}；
从“../models/show”导入{Contact}；
从“../../../environments/environment”导入{environment}；
//通过Http使用新改进的HttpClient
//从'@angular/Http'导入{Http，Response}；
从'@angular/common/http'导入{HttpClient}；
//创建新的传输对象以从服务器获取数据
接口服务器数据{
显示：显示[]；
}
@可注射（）
导出类showservice{
构造函数（私有http:HttpClient）{}
//想要看得到的表演[]
findAllShows（）：可观察的{
//请求作为传输对象
返回此文件。http
.get（`${apirl}/shows`）
//映射到我需要的适当的可观察对象
.map（res=>res.shows）；
}
}

---

现在一切都很好！！！谢谢所以，根据返回的数据，我可以直接使用，也可以映射到我需要的适当的可观测数据

.map（res=>res['shows']）

实现了这个技巧

最新的

HttpClient

应该使用它来代替

http

没有

map

方法。您应该首先从'rxjs/operators'通过

import{map}导入它
那么您应该这样使用它：

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

我试过了，结果出错了。。。属性“shows”在类型“Response”上不存在。@Netwobble否，请不要将其类型转换为type
Response
。请参阅我的编辑。'map'函数对于
httpClient
@ArunRedhu
httpClient仍然不可用。get（）
应该返回一个
可观察的
，我们通过
可观察的
明确说明了这一点。
.map（）
是一个将可观察对象转换为新对象的运算符。不带类型参数的get（“”）应返回可观察对象。尝试使用.map（res=>res['shows']）创建一个新接口来包装数据，然后将其展开不是最好的方法，为什么？映射中的.shows属性已经具有所需的类型。我尝试了上述方法。我正在获取服务中的数据，但不在组件中。您能告诉我如何调用组件中的服务吗？提前谢谢。虽然此代码可能会回答此问题，但提供有关此代码为什么和/或如何回答此问题的其他上下文可提高其长期价值。是的，有关res.shows为什么不起作用的详细信息，但此工作确保具有
“SuppressImplicationIndexErrors”：true，
在tsconfig.json文件中，以抑制错误TS7015。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

interface ItemsResponseObj {
    id: string,
    modified: string,
    name: string
}

interface ItemsResponse {
    shows: Array<ItemsResponseObj>;
}

@Injectable()
export class AppService {

    constructor(private http: HttpClient) { }

    getData(): Observable<ItemsResponse> {
        return this.http.get<ItemsResponse>('api/api-data.json')
    }

}

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); 

  }
}

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