rxjs map parameter is the entire array

Question

public observableA = (id: string): Observable<Array<any>>=>{

}

public observableB = (id: string): Observable<Array<myClass>>=>{
    observableA(metroId).map((x)=>{
         return new myClass(
            x.FacilityName,
            x.ID)
    };
}

export class myClass{
    ID: string;
    Name: string;
    constructor(id: string, name: string){this.ID=id;this.Name=name;}
}

ObservableA returns an array of objects, I'm writing a function ObservableB to return an array of myClass using the returned array of ObservableA.

When I debug this code, What I can see is 'x' in the map parameter is the entire array from ObservableA, rather than the object elements of the array.

so the properties can't be accessed.

What could be wrong?

Update: Is there a way to make the single Observable of Array to an array of Observables so I can process the elements?

Was that not what you expected? `Observable.map` is mapping over each item *in the stream*, not in the array that stream happens to contain. You may be confusing it with `Array.map`. — jonrsharpe, Mar 07 '18 at 21:52
That is also basically `Array.map`, by the looks of it. See e.g. https://stackoverflow.com/q/42482705/3001761. — jonrsharpe, Mar 07 '18 at 21:56
The edited question is still weird. I doubt that you want an array of observables. I think you don't yet understand the concept of observables and would encourage you to read more about it first. — Ingo Bürk, Mar 10 '18 at 07:43

score 4 · Accepted Answer · answered Mar 07 '18 at 22:05

I think you misunderstand how observables work.

You are getting the whole array because that's what the observable is working with. It's a Observable<Array<any>>, so the map operator will get a Array<any>. If you want to work on one object at a time, your observable should be of type Observable<any> (or better, using a concrete class like Observable<TestClass>)

You can create an Observable<T> from an Array<T> using from, see this page: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-from

I don't know how this can be applied to you since you didn't post how observableA works.

Here's some resources I used when I learned RxJs:

Luillyfe · Answer 2 · 2018-03-10T06:01:23.140

I do not see the need for a second Observable, maybe this what you want to achieve but let me know if I am wrong, I will update accordingly:

live example

import { Observable } from 'rxjs/Observable';
import { async } from 'rxjs/scheduler/async';
import { from } from 'rxjs/observable/from';

import { map } from 'rxjs/operators';

const metroId: string = "IamAnId";
const arry: Array<myClass> = [];
const observableA: (id: string) => Observable<any> = (id: string) => {
    // use your id whatever you want
    return from([
        {
            FacilityName: 'name',
            ID: 'IamAnotherId'
        },
        {
            FacilityName: 'AnotherName',
            ID: 'AlsoHere'
        }
    ], asyn);
}

observableA(metroId)
    .pipe(map(x => {
        return new myClass(
            x.FacilityName,
            x.ID)
    }))
    .subscribe(itemClass => {
        arry.push(itemClass);
    })

this x is the entire array so I'm not able to access the element's property values. I think if observableA returns Observable.from, this would work — sfdcnoob, Mar 09 '18 at 22:33
My bad, I was using the wrong creator (of). Observable.of and Observable.from are synchronous by default (that is why you are getting the whole array from once). But you can change Observable.from to be asynchronous by adding an Scheduler as a second parameter (async). — Luillyfe, Mar 10 '18 at 06:05

rxjs map parameter is the entire array

2 Answers2