Angular/RxJs not recognising array

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…]

I've made a change that demonstrates more closer to what I'm actually doing. — Matthew Christianson
– Matthew Christianson, Commented Jul 19, 2017 at 11:26
Having done some more testing the problem is the second map function does not see the argument (r) as an element of an array, r is still an array at the point the second map function is called — Matthew Christianson
– Matthew Christianson, Commented Jul 19, 2017 at 11:30
Is the JSON object returned by you backend an array of objects or an object? If its an array, how do you think to map a single property of every element to only one object? the return type of your function should be on that case an array to — Jota.Toledo
– Jota.Toledo, Commented Jul 19, 2017 at 11:31
From the server an array of objects is returned, I don't want to map to a single element. I want to take one property from each element of the array and return an array of those properties. e.g [{property:1}, {property:2}, {}, {}...] — Matthew Christianson
– Matthew Christianson, Commented Jul 19, 2017 at 11:52

Jota.Toledo · Accepted Answer · 2017-07-19 11:49:35Z

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

edited Jul 19, 2017 at 11:49

answered Jul 19, 2017 at 11:20

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LookForAngular Over a year ago

The OP code is correct, by not using the {} indide the callback code the value is automatically returned

Jota.Toledo Over a year ago

Not sure what you meant, but yeah, that would be related to arrow expressions. Anyways, the op edited the original question that included a console log...Ill updated my answer

Matthew Christianson Over a year ago

I get: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Matthew Christianson · Accepted Answer · 2017-07-19 11:41:42Z

0

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

edited Jul 19, 2017 at 11:41

Matthew Christianson

2863 silver badges13 bronze badges

answered Jul 19, 2017 at 11:31

LookForAngular

1,0708 silver badges18 bronze badges

4 Comments

Matthew Christianson Over a year ago

But why do none of the examples online not do this?

LookForAngular Over a year ago

This is a pretty basic example, more common than you think, however by not knowing the client of the observable i cannot say it's the right approach. For instance, the client of the observable ( its subscriber ) just need an array of values to render them, or the template is the consumer, and it is using an async pipe. All is based on which kind of values the client it is intrested in, and many operators can be used to map the observable output for specific needs

Matthew Christianson Over a year ago

Why do I need to do Observable.from(obj) ?

LookForAngular Over a year ago

The value you get from calling the http.get function is an observable of a response, the response is a single value. If you need a stream that emit multiple times, you can either create a custom one or use the Observable.from operator

AVJT82 · Accepted Answer · 2017-07-19 12:06:06Z

0

I want to take one property from each element of the array and return an array of those properties. e.g [{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})))
}

answered Jul 19, 2017 at 12:06

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Collectives™ on Stack Overflow

Angular/RxJs not recognising array

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related