Question

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

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

{
  "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”，并在构造函数（）{}等中使用它。

” ../模型/ brand.ts'

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

“../服务/ 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：对象{id：2，名称：“Dell”，display_order：6，...}

2：对象{id：3，名称：“HP”，display_order：5，...}

3：Object {id：4，name：“HTC”，display_order：4，...}

4：Object {id：5，name：“Samsung”，display_order：2，...}

5：对象{id：6，名称：“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
  }
}

然后管道响应并创建一个新的Object，将您的字段映射到正确的字段，如下所示：

  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的传入数据。

希望这可以有所帮助！

Answer 2

感谢您的建议。这是JSON中需要考虑的“资源”键！

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

我成功使用以下内容：

brand.ts

export interface Brand {
  id: number;
  name: string;
  display_order: number;
  visible: boolean;
}

data.service.ts

  getBrands(): Observable<Brand[]> {
    return this.http.get<Brand[]>(this.baseUrl + 'brand' + '?api_key=' + this.APP_API_KEY)
    .pipe(
      map(res => res['resource'])
    );
  }

Answer 3

DbContextOptions<MyDbContext>

别忘了导入Brand class / interface

编辑：如果是一个数组，则需要this.http.get<Array<Brand>>('/whateverurl).subscribe( ...

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

3 个答案: