angular – 如何让Observable返回一组转换项(Rxjs)

发布时间：2020-12-17 18:11:40 所属栏目：安全来源：网络整理

导读：我有一个端点,生成一个json产品列表.我的产品代码中定义了自定义类类型.我正在尝试从端点获取数据并将json数组转换为Product类的数组. 示例API json(从我的实际数据中简化)： { "products": [{ "id": 1,"name": "Product 1","materials": [{ "id": 100,"desc

我有一个端点,生成一个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"
        }]
    }]
}

我的代码：

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);
        });

我希望在我的控制台中看到的是……

"Converting to json 2"
"Working on data: " [object]
"Working on data: " [object]
"the data:" [object,object]

..但我所看到的是……

"Converting to json 2"
"Working on data: " [object,object]
"the data:" [object,object]

我认为.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();
}

我误解了Observable.map是如何工作的 – 认为当它实际运行在每个数据上时,它将在我的数据中的每个项目上运行..我有一个数据来到它 – 一个数组.感谢@jonrsharpe在那里帮助我.

通过使用switchMap从我的数组中返回一个新的Observable,我能够分别发出我的数组中的每一段数据.谢谢@ giora-guttsait的帮助.

最后,我需要将流的所有新部分组合回一个阵列. Observable.toArray()为我做了这个.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!