我有一个端点,生成一个json产品列表.我的产品代码中定义了自定义类类型.我正在尝试从端点获取数据并将json数组转换为Product类的数组.
示例API json(从我的实际数据中简化)：
{
"products": [{
"id": 1,"name": "Product 1","materials": [{
"id": 100,"desc": "wood"
},{
"id": 101,"desc": "Metal"
}]
},{
"id": 2,"name": "Product 2",{
"id": 102,"desc": "brick"
}]
}]
}@H_403_14@
我的代码：
loadProducts(){
this.fetchProducts().subscribe(data => {
console.log("the data:",data);
})
}
fetchProducts(): Observable<Product[]> {
return this.http.get("http://example.com/mydata.json")
.map((response) => {
const products = (response.json()).products;
console.log("Converting to json" + products.length);
return products;
})
.map( data => {
console.log("Working on data: ",data);
return new Product(data.id,data.name,data.materials);
});@H_403_14@
我希望在我的控制台中看到的是……
"Converting to json 2"
"Working on data: " [object]
"Working on data: " [object]
"the data:" [object,object]@H_403_14@
..但我所看到的是……
"Converting to json 2"
"Working on data: " [object,object]
"the data:" [object,object]@H_403_14@
我认为.map函数会针对发送给它的每个项目运行.我可以看到,当我第一次调用.map时,它在一个项目(响应)上运行一次 – 我知道有两个产品被返回.我希望第二个map函数可以运行两次 – 每个产品项一次.相反,它似乎被称为一次在产品数组中传递.
为了使问题更复杂,我还希望将材料列表转换为我创建的Material类类型.我知道我可以用forEach循环完成所有这些,但我想以“React”的方式做到这一点.
解决方法
我终于找到了Observable操作的正确组合,以产生我想要的东西.
fetchProducts(): Observable<Product[]> {
return this.http.get("http://examples.com/myData")
.map((response) => {
return response.json().products;
})
.switchMap( productArray => {
return Observable.from(productArray);
})
.map( (productData: any) => {
return new Product(
productData.id,productData.name,productData.materials
);
})
.toArray();
}@H_403_14@
我误解了Observable.map是如何工作的 – 认为当它实际运行在每个数据上时,它将在我的数据中的每个项目上运行..我有一个数据来到它 – 一个数组.感谢@jonrsharpe在那里帮助我.
通过使用switchMap从我的数组中返回一个新的Observable,我能够分别发出我的数组中的每一段数据.谢谢@ giora-guttsait的帮助.
最后,我需要将流的所有新部分组合回一个阵列. Observable.toArray()为我做了这个.
