angular - 新的 Angular HTTPClient 从 Dreamfactory API 获取响应数据

Question

我正在尝试编写连接到 DreamFactory API 的 Angular 6 服务。

我已设法从允许 DreamFactory 管理的数据库中的“品牌”表中提取 json 数据。我能够向 API 发送获取请求，因此通信没有问题。下面是一个示例:

{
  "resource": [
    {
      "id": 1,
      "name": "Apple",
      "display_order": 1,
      "visible": true
    },
    {
      "id": 2,
      "name": "Dell",
      "display_order": 6,
      "visible": true
    },
    {
      "id": 3,
      "name": "HP",
      "display_order": 5,
      "visible": true
    },
    {
      "id": 4,
      "name": "HTC",
      "display_order": 4,
      "visible": true
    },
    {
      "id": 5,
      "name": "Samsung",
      "display_order": 2,
      "visible": true
    },
    {
      "id": 6,
      "name": "Sony",
      "display_order": 3,
      "visible": true
    }
  ]
}

我正在努力处理数据的格式:

如何将“资源”响应中的字段映射到我在 Angular 中创建的类？我已经将“brand.ts”导入到“data.service.ts”中。我在所有正确的地方导入了 HTTPClient，例如“app.module.ts”和“data.service.ts”，并在 constructor() {} 等中使用了它。

'../models/brand.ts'

export class Brand{
    id: number;
    name: string;
    displayOrder: number;
    isVisible: boolean;
}

‘../services/data.service.ts’

...
    getBrands() {
        this.http.get(this.baseUrl + 'brand' + '?api_key=' + this.APP_API_KEY)
          .map((data: Response) => {
            return data;
          })
          .subscribe((data => {
            console.log(data);
            this.brands = data;
          })
          );
      }

...

通过在控制台中使用上面的代码，我的数据输出如下:

资源:(6) […]

0: Object { id: 1, name: "Apple", display_order: 1, ... }

1: Object { id: 2, name: "Dell", display_order: 6, ... }

2: 对象 { id: 3, name: "HP", display_order: 5, ... }

3: 对象 { id: 4, name: "HTC", display_order: 4, ... }

4: Object { id: 5, name: "Samsung", display_order: 2, ... }

5: Object { id: 6, name: "Sony", display_order: 3, ... }

长度:6……

如何修改我的代码以将数据映射到我的类？例如，字段“display_order”需要映射到我的 Angular 类属性“displayOrder”等。任何帮助将不胜感激，因为我是 Angular 的菜鸟。

Answer 1

像这样向你的类类型添加一个构造函数:

export class Brand {
  id: number;
  name: string;
  displayOrder: number;
  isVisible: boolean;

  constructor(item) {
    this.id = item.id;
    this.displayOrder = item.display_order;
    // set rest of variables
  }
}

然后通过管道传输响应并创建一个新对象，将您的字段映射到正确的字段，如下所示:

  getBrands(url: string): Observable<Brand[]> {
    return this.http.get(url).pipe(map((data: any[]) => {
      const res: Brand[] = [];
      data.map((item) => {
        res.push(new Brand(item));
      });
      return res;
    }));
  }

我将其设置为服务的返回，因为您应该将此 Observable 返回到服务外的组件代码，然后在那里订阅。这将输出一个包含映射字段的 Brand 数组

构造函数中字段的设置将允许您将 displayOrder 的字段设置为 display_order 的传入数据。

希望对您有所帮助!