Angular 7 HttpClient get - 你能访问和处理return对象吗？

Question

我知道这是一个普遍的问题，但我已经用尽了 google 并尝试了很多 approaches.Any 感谢反馈。

HTTPClient 是 Angular 5+，因此它 return 是根据响应 JSON 数据创建的对象。我从我无法控制的端点收到大量 JSON 响应，我想在我的应用程序中使用大约 20% 的响应并忽略其余部分。

我真的在努力避免使用一系列模板或导出对象或其他任何东西，并试图将这个庞大的非类型化 Observable 强制转换为具有数百个字段的类型化对象，其中许多字段是数组。该应用程序所需的只是一个非常小的对象数组，每个对象有 3 个字段。这 3 个字段都在 JSON 响应中，我想将它们映射到我的对象。map 似乎仅在您使用完整响应对象时才有效，我找不到 .map 自定义的示例除了在您将几个字段映射到 1 个对象而我试图映射到我的小对象数组的情况下工作之外。

已更新

基本上我希望此服务向订阅它的模块 return 类型为 DislayData 的对象，但我只得到一个对象。这不是我最终需要做的，但如果我能证明我可以将响应主体映射到我需要的 return 类型，我就可以开始分解响应主体和 return 数组我真正需要的类型基于我愚蠢的 DisplayData 对象。再次感谢！

export interface DislayData {

    body: any;
   
}

...
export class DataService {

  constructor(private http: HttpClient) { }
  /** GET data from the black box */
  getData(): Observable<DislayData> {

    return this.http.get<HttpResponse<any>>(searchUrl, { observe: 'response' })
      .pipe(
         map(res => {
           return res.body as DislayData;
        }
        tap(res => console.log(//do stuff with entire respoonse also)),
        catchError(err => this.handleError(err)));

  }

  private handleError(error: HttpErrorResponse) {
  ...

Answer 1

你知道答题对象的结构吗？

如果是，你可以这样做：

item$ = new BehaviorSubject<any>({});
item = {
  foo: 'a',
  bar: 'b',
  iton: [1, 2, 3],
  boo: {
    far: 'c'
  }
};

logNewItem() {
    this.item$
      .pipe(
        map(response => {
          if (response.foo 
              && response.iton
              && response.iton.length >= 3 
              && response.boo
              && response.boo.far) {
            let newItem = {
              foo: response.foo,
              iton2: response.iton[2],
              far: response.boo.far
            };
            console.log(newItem); // output: Object { foo: "a", iton2: 3, far: "c" }
          }
        })
      )
      .subscribe();
    this.item$.next(this.item);
  }

基本上，您可以简单地确保属性存在，直接调用它们并将它们映射到更合适的对象。

我强烈建议为您接收的对象创建一个接口，并为您要映射到的对象创建一个接口或 class。在那种情况下，您还可以像这样编写更紧凑的代码：

[...]
map(response: MyAPIResponse => {
            let newItem = new NewItem(response);
            console.log(newItem); // output: Object { foo: "a", iton2: 3, far: "c" }
          }
        })
[...]

class NewItem {

foo: string;
iton2: string;
far: string;

constructor(apiResponse: MyAPIResponse) {
  //Validate parameter first
  this.foo = apiResponse.foo;
  this.iton2 = apiResponse.iton[2];
  this.far = apiResponse.boo.far;

并使您的代码更具可读性。

Angular 7 HttpClient get - 你能访问和处理return对象吗？

Angular 7 HttpClient get - can you access and process the return object?

json

node.js

typescript

angular

angular-httpclient