如何让 Observable 返回转换后的项目数组 (Rxjs)

我有一个生成 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",
        "materials": [{
            "id": 100,
            "desc": "wood"
        }, {
            "id": 102,
            "desc": "brick"
        }]
    }]
}

My code:

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 时，它在它所拥有的一个项目（响应）上运行一次 - 而且我知道有 2 个产品被返回。我希望第二个地图函数运行两次 - 每个产品项目运行一次。相反，它似乎是在产品数组中传递一次后才被调用的。

为了使事情变得更复杂，我还想将材料列表转换为我创建的材料类类型。我知道我能做到all使用 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() 为我做了这个。