The Angular4 HttpClient is throwing an error stating that the type 'Observable<Observable<Object>>' cannot be assigned to the type 'Observable<boolean>'

Question

The Angular4 HttpClient is throwing an error stating that the type 'Observable<Observable<Object>>' cannot be assigned to the type 'Observable<boolean>'

Currently, I am utilizing the Angular 4 http client to fetch data from the server, but I am encountering an error that states:

Type 'Observable<Observable<Object>>' is not assignable to type 
  'Observable<boolean>'.

Within the http request, my code looks like this:

  saveCredit(data): Observable<boolean> {

   return this._http.post(this.authurl + 'auth/save-credit', data)
     .map((res) => {
    return Observable.of(res);
      }, (err) => {
       return Observable.of(false)
     });
  }

After saving on the server, I am returning either true or false. What additional steps should I take in order to effectively utilize the above method using:

this._acceeService.saveCredit(data).subscribe((res)=>{
   ...do my stuff here
})

angular typescript

Answer 1

Answer №1

By using the this._http.post() method, you are already working with an observable. Therefore, in order to return an observable of boolean values within this function, you should return a boolean value.</p>

<p>One possible approach is the following:</p>

<pre><code>saveCreditData(data): Observable<boolean> {
    return this._http.post(this.authurl + 'auth/save-credit', data).map(
        res => !!res,
        err => false
    );
}

Answer 2

By using the this._http.post() method, you are already working with an observable. Therefore, in order to return an observable of boolean values within this function, you should return a boolean value.</p>

<p>One possible approach is the following:</p>

<pre><code>saveCreditData(data): Observable<boolean> {
    return this._http.post(this.authurl + 'auth/save-credit', data).map(
        res => !!res,
        err => false
    );
}

Answer 3

Answer №2

A common mistake is returning an observable inside another observable.

Instead of nesting observables, it's recommended to just return the initial observable and utilize the catch operator for error handling.

saveCredit(data): Observable<boolean> {
   return this._http.post(this.authurl + 'auth/save-credit', data).catch(this.handleError)  
}  

public handleError = (error: Response) => {            
    // Handle messaging and errors here
    return Observable.throw(error)
}

Alternatively, if you need to use an Observable within another, consider using the flatMap Operator

this._acceeService.saveCredit(data)
.flatMap(res=>res)
.subscribe((res)=>{
   ...perform actions here
})

Answer 4

A common mistake is returning an observable inside another observable.

Instead of nesting observables, it's recommended to just return the initial observable and utilize the catch operator for error handling.

saveCredit(data): Observable<boolean> {
   return this._http.post(this.authurl + 'auth/save-credit', data).catch(this.handleError)  
}  

public handleError = (error: Response) => {            
    // Handle messaging and errors here
    return Observable.throw(error)
}

Alternatively, if you need to use an Observable within another, consider using the flatMap Operator

this._acceeService.saveCredit(data)
.flatMap(res=>res)
.subscribe((res)=>{
   ...perform actions here
})

The Angular4 HttpClient is throwing an error stating that the type 'Observable<Observable<Object>>' cannot be assigned to the type 'Observable<boolean>'

Answer №1

Answer №2

Similar questions

Leverage ng2-charts along with a loading component during the AfterViewInit lifecycle hook

Errors encountered during the Angular project build

Tips for extracting key values from an array of objects in Typescript

What is the process of mapping an array of elements for a React component using TypeScript?

Determining the instance type of a TypeScript singleton class

Tips for formatting nested Angular components in a visually pleasing manner:

What strategies work well when it comes to developing translation files in Angular?

I am encountering difficulties while attempting to import Typescript files. Upon compiling them into Javascript, I am faced with errors in the web browser, specifically the issue of "exports is not defined"

`Toggle your material to reveal the hidden button or content`

What is the best way to initiate multiple processes in Node.js and ensure they finish before proceeding?

Unexpected behavior encountered when running Angular 8 radio button checked function

Mastering Typecasting in TypeScript: A comprehensive guide

Designing the Firebase Structure of an Angular Application

Encountering 'npm install' error while trying to follow the Angular2 5 minute

The HTTP request fails to accept the input value provided

The 'connectedCallback' property is not found in the 'HTMLElement' type

The Angular Material datepicker seems to be ignoring the limitations set by [min] and [max] restrictions

What is the best way to find a partial string match within an array of objects when using Jest?

Guide on submitting a form through the Angular 2 HTTP post method with JavaScript

I encountered an error when attempting to utilize a recursive type alias in a generic context