7

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

Community
  • 1
  • 1
Ivar Reukers
  • 7,560
  • 9
  • 56
  • 99
  • What exactly is the proble here, is it typing problem? Any way, `Array` is wrong here because `response.json()` is `any`. – Estus Flask Nov 15 '16 at 15:35
  • response.json() is confirmed to be an `Array` **note:** the method `getAllParticipants` worked well before, I'm just trying to incorporate the `Headers` from the `getUserHeaders()` method – Ivar Reukers Nov 15 '16 at 15:37
  • It isn't `Array` from Typescript's perspective. And you didn't explain what is the problem. – Estus Flask Nov 15 '16 at 15:40
  • @estus edited the question, I think I made it a bit more clear, if still unclear, please comment :) – Ivar Reukers Nov 15 '16 at 15:50
  • It isn't clear what error message is and why it happens. The solution itself looks ok, [MCVE](http://stackoverflow.com/help/mcve) is what the question lacks. – Estus Flask Nov 15 '16 at 15:58
  • @estus errormessage VSCode gives me is this: `Type 'Subscription' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'Subscription'. (property) APICaller.http: Http` – Ivar Reukers Nov 15 '16 at 16:09
  • This message suggests that `.subscribe` is done in this method. It isn't possible to resolve your issue without MCVE. The code you've posted looks ok to me but it can differ from real app – Estus Flask Nov 15 '16 at 16:30
  • @estus, excuse me I had the wrong method in my code, this is the correct error `Type 'Observable' is not assignable to type 'Observable'` – Ivar Reukers Nov 16 '16 at 07:36
  • @estus, added plunkr, with promises instead of Observables, see question for details – Ivar Reukers Nov 16 '16 at 08:24
  • Please, be specific when you're talking about errors. Runtime errors and compiler errors are totally different things. *'Observable' is not assignable to type 'Observable'* is type error. Returned type should be `Observable`, just because `response.json()` is untyped. It's not clear what *Observable.fromPromise() didn't work here* means, and I don't see what's wrong with plunker you've posted. It is not possible to solve a problem if it isn't clear what exactly the problem is. – Estus Flask Nov 16 '16 at 13:08

2 Answers2

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

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

Vic Seedoubleyew
  • 9,888
  • 6
  • 55
  • 76