rxjs map parameter is the entire array

3
votes
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?

2
angulartypescriptrxjsobservable
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
@jonrsharpe Oh i thought it's similar to lodash's map - sfdcnoob
That is also basically Array.map, by the looks of it. See e.g. stackoverflow.com/q/42482705/3001761. - jonrsharpe
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

2 Answers

4
votes

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:

0
votes

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