Angular / RxJs无法识别数组

Question

I can't understand why the below code doesn't work as expected.

    public GetX(): Observable<MyDataType> {
    return this.http.get('http://localhost:64113/api/endpoint')
        .map((r: Response) => r.json())
        .map((r) => r.someProperty)
        .catch(error => Observable.throw(error));
}

The problem is the second map function only gets called once even though I'm returning an array from the .Net Core WebAPI endpoint. It looks like:

[{}, {}, {}, {}...]

Shouldn't map iterate over every element in the array being passed back from the server?

Below is the result of the console.log

(124) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object…]

Answer 1

The problem is the second map function that you are calling. Map applies a transformation to a stream of data and should return the transformed elements.

Currently the 2nd map consumes the array of POJOs returned by your webapi but doesnt pass them back again to the stream flow.

Assuming that MyDataType is a typescript interface and contains the matching properties of the returned JSON object from your webapi, you could use the following to print the server response:

return this.http.get('http://localhost:64113/api/endpoint')
        .map(r => r.json())
        .do(r => console.log(r))
        .catch(error => Observable.throw(error));

UPDATE: if you want to map a property of every element in the array, you should use mergeMap

 return this.http.get('http://localhost:64113/api/endpoint')
            .map(r => r.json()) // map to json body
            .mergeMap(r => r) // flatten array
            .map(e => e.property) //map singular objects to a property
            .catch(error => Observable.throw(error));

MergeMap will flatten the array by mapping every singular POJO to one of its properties. In this case the return type of your function is trully accurate anymore.

You can find more info about the operator here

Answer 2

If you need to iterate over an array returned by an ajax call, you should wrap it inside an Observable.from function. You do need another map after the json one, a map that does not return a value, but an observable. In such case use a flatMap.

//code omitted for brevity
.map( r : Response => r.json() )
.flatMap((obj: any) => Observable.from(obj) )

After this point the Observablel of array becomes an Observable of single values. However i have no clue about the type you have provided, and cant see if the type is a wrapper around an array or not

Answer 3

I want to take one property from each element of the array and return an array of those properties. eg [{property:1}, {property:2}, {}, {}...]

Then I would suggest you do it like the following, where we use map on the array and assign the property you want to a new object, with Object.assign

public GetX(): Observable<MyDataType> {
  return this.http.get('http://localhost:64113/api/endpoint')
    .map((r: Response) => r.json().map((x:any) => Object.assign({propertyName: x.property})))
}