新的Angular HTTPClient从梦工厂API获取响应数据
我正在尝试编写一个连接到DreamFactory应用程序接口的Angular 6服务。
我已经设法从我允许DreamFactory管理的数据库中的“品牌”表中提取了json数据。我可以向API发送get请求，所以通信没有问题。下面是一个示例：
{
"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
}
]
}我正在努力解决数据的格式化问题：
如何将"resource“响应中的字段映射到我在Angular中创建的类？我已经将“brand.ts”导入到了“data.service.ts”中。我已经在所有正确的地方导入了构造函数，比如“app.module.ts”和“data.service.ts”，并在HTTPClient () {}等中使用了它。
'../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:对象{ id: 1，名称："Apple"，display_order: 1，…}
1:对象{ id: 2，名称："Dell"，display_order: 6，…}
2:对象{ id: 3，名称："HP"，display_order: 5，…}
3:对象{ id: 4，名称："HTC"，display_order: 4，…}
4:对象{ id: 5，名称："Samsung"，display_order: 2，…}
5:对象{ id: 6，名称："Sony"，display_order: 3，…}
长度:6…
如何修改代码以将数据映射到类？例如，字段“display_order”需要映射到我的Angular类属性“displayOrder”等。任何帮助都将不胜感激，因为我是Angular的新手。
回答 3
Stack Overflow用户
发布于 2018-06-02 01:08:59
向您的类类型添加一个构造函数，如下所示：
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;
}));
}我将此设置为从服务返回，因为您应该将此可观察对象返回到服务的组件代码，然后在那里进行订阅。这将输出一个映射了字段的Brand数组
通过设置构造函数中的字段，您可以将displayOrder的字段设置为display_order的传入数据。
希望这能对你有所帮助！
Stack Overflow用户
发布于 2018-06-06 16:23:12
谢谢你的建议。需要考虑的是JSON中的"resource“键！
{
"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'])
);
}Stack Overflow用户
发布于 2018-06-02 08:54:39
this.http.get<Array<Brand>>('/whateverurl).subscribe( ... 不要忘记导入Brand类/接口
编辑:如果它是一个数组，你需要<Array<Brand>>
https://stackoverflow.com/questions/50648040
复制相似问题