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

问题描述

我正在调用一个返回JSON对象的API.我只需要将数组的值映射到Observable即可.如果我调用仅返回数组的api，那么我的服务调用将起作用.

I am calling an API that returns a JSON Object. I need just the value of the array to map to a Observable . If I call api that just returns the array my service call works.

下面是我的示例代码..

Below is my sample code ..

// 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对象(例如下面的内容)，则此操作失败.

If the return is a JSON Object such as below this fails..

// 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"
    }
  ]
}

现在，如果我只返回数组，此方法就可以工作

Now this one works if I just return the Array

// 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映射为Array Observable?

How do I map the JSON object Observable into an Array Observable???

推荐答案

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

You can simply .map() your http call, which is an Observable, to return the data type that you want.

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

您的httpClient.get()应该返回一个Observable，您已明确指出它以Observable<Show[]>表示.您.map()是将可观察对象转换为新对象的运算符.

Your httpClient.get() should return an Observable, which you have explicitly stated it thought Observable<Show[]>. You .map() is an operator that transform the observable into a new one.

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

More on .map() operator: http://reactivex.io/documentation/operators/map.html

对于RXJS 6及更高版本，只需使用.pipe()来传递.map()运算符:

For RXJS version 6 and above, simply use .pipe() to pipe the .map() operator:

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

这篇关于Angular-HttpClient:将获取方法对象的结果映射到数组属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！