Angular2 - Use value of Observable returning method in another Observable

Question

The problem

I dont know how to use the value of the currently returned Observable of getUserHeaders() in my http.get.

Current error

Type 'Observable<void>' is not assignable to type 'Observable<Participant[]>'

Expected result

Being able to use the value of my Observable returning method getUserHeaders() as a headers attribute within the http call. While only returning the http call's Observable.

Previous code

(which worked with harcoded Headers returned by getUserHeaders() (so not an Observable or Promise).

getAllParticipants(): Observable<Array<Participant>> {
    return this.http.get('someUrl',
                {headers: this.getUserHeaders()})
           .map(response => {
               return response.json();
        });
    });
   }

Current code

going by Chaining RxJS Observables from http data in Angular2 with TypeScript 's answer I came to the flatMap method. (note this code currently throws the 'current error')

getUserHeaders(): Observable<Headers> {
        let headers: Headers = new Headers();

        return NativeStorage.getItem("user").map(
            data => {
                headers.append('API_KEY', data.json().apiKey);
                headers.append('DEVICE_ID', data.json().deviceId);
                return headers
            }).catch( error => {
                console.log("error");
                headers.append('API_KEY', 'TEST');
                headers.append('DEVICE_ID', 'TEST');
                return headers;
            }
        );
    }

/** retrieves ALL the participants from the database */
    getAllParticipants(): Observable<Array<Participant>> {

         return this.getUserHeaders().flatMap( data => {
            return this.http.get('someUrl', {headers: data}).map(response => {
                return response.json();
            });
        });
   }

plunkr (Promise instead of Observable)

http://plnkr.co/edit/A0tEB9EUodWQS6AnqrtH?p=info

(note: Observable.fromPromise() didn't work here so I have created the two methods returning promises -- now I want to use the value of getUserHeaders() inside the promise of getParticipants() and still return the promise/observable of getParticipants() and nothing from getUserHeaders()

What exactly is the proble here, is it typing problem? Any way, Array<Participant> is wrong here because response.json() is any. — Estus Flask
– Estus Flask, Commented Nov 15, 2016 at 15:35
response.json() is confirmed to be an Array<Participant> note: the method getAllParticipants worked well before, I'm just trying to incorporate the Headers from the getUserHeaders() method — Ivafo
– Ivafo, Commented Nov 15, 2016 at 15:37
It isn't Array<Participant> from Typescript's perspective. And you didn't explain what is the problem. — Estus Flask
– Estus Flask, Commented Nov 15, 2016 at 15:40
@estus edited the question, I think I made it a bit more clear, if still unclear, please comment :) — Ivafo
– Ivafo, Commented Nov 15, 2016 at 15:50
It isn't clear what error message is and why it happens. The solution itself looks ok, MCVE is what the question lacks. — Estus Flask
– Estus Flask, Commented Nov 15, 2016 at 15:58

user4189129 · Accepted Answer · 2016-11-16 13:31:09Z

4

Change your getUserHeaders() to look like:

getUserHeaders(): Observable<any> { return Observable.of(NativeStorage.getItem("user"); }

Then construct your headers object within getParticipants(). This way you can keep flatMap

answered Nov 16, 2016 at 13:31

user4189129

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

1 Comment

Ivafo Over a year ago

where in getParticipants should i construct my headers?

Vic Seedoubleyew · Accepted Answer · 2018-06-12 13:41:42Z

0

Personally, the solution to my problem was to use BehaviorSubject:

In service (source of the data):

private theBoolean: BehaviorSubject<boolean>;

constructor() {
    this.theBoolean = new BehaviorSubject<boolean>(false);
}

public getTheBoolean(): Observable<boolean> {
    return this.theBoolean.asObservable();
}

To emit new value of theBoolean do smth like

public setTheBoolean(newValue: boolean): void {
    this.theBoolean.next(newValue);
}

In component (user of the data):

this.theService.getTheBoolean().subscribe(value => console.log(value));

Credit to "pashozator" on Reddit

answered Jun 12, 2018 at 13:41

Vic Seedoubleyew

10.7k6 gold badges61 silver badges81 bronze badges

Collectives™ on Stack Overflow

Angular2 - Use value of Observable returning method in another Observable

The problem

Current error

Expected result

Previous code

Current code

plunkr (Promise instead of Observable)

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

The problem

Current error

Expected result

Previous code

Current code

plunkr (Promise instead of Observable)

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related