Ivaro18 Ivaro18 - 16 days ago 4
TypeScript Question

Angular2 - Use value of Observable returning method in another Observable

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()

Bas Bas
Answer

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

Comments