时间戳

首页 > 解决方案 > 当返回的 JSON 与 Angular 服务中的类不完全匹配时，将 API 响应映射到类

angular - 当返回的 JSON 与 Angular 服务中的类不完全匹配时，将 API 响应映射到类

问题描述

我正在调用一个返回以下 JSON 结构的公共 API：

{
    "meta": {
        "xyz": "abc123"
    },
    "events": [
        {
            "event_id": "ggldfgsdl343409534095kgdflkgdslk",
            "event_name": "Event 1",
        },
        {
            "event_id": "214732hdfghdfghj43348fgdfgkjfdkf",
            "event_name": "Event 2",
        },
        {
            "event_id": "35345dsfgdgkjdfgdkjg49343djfgdfk",
            "event_name": "Event 3",
        }
    ]
}

我创建了一个名为 Event 的类：

export class Event {
    eventId: String;
    eventName: String;
}

这是我的 EventService 中对 API 的调用：

  getEvents(): Observable<Event[]> {
    return this.http.get<Event[]>(this.eventApiUrl, this.httpOptions);
  }

我知道一些事情：

  1. 我的类的属性名称与 JSON 响应中的属性名称不匹配。
  2. 如上所示，唯一可行的方法是属性名称与 JSON 中的属性名称匹配，并且 API 直接返回一个对象数组
  3. 我想我需要使用 pipe(map()) 但无法正常工作

我想知道如何在“事件”数组中向下钻取一层并将其中的对象列表作为 Event[] 返回，同时考虑属性名称不匹配。

标签： angulartypescriptrxjs

解决方案

getEvents(): Observable<Event[]> {
  return this.http.get<Event[]>(this.eventApiUrl, this.httpOptions).pipe(
    map((res: any) => {
      return res.events.map(e => {
        return { eventId: e.event_id, eventName: e.event_name };
      })
    });
  );
}

你确实需要一个map. 循环遍历events响应对象内的 prop 并从每个对象构建一个新对象。

推荐阅读