Angular is not providing the anticipated outcome

Question

Angular is not providing the anticipated outcome

I'm new to Angular (7) and I'm encountering an issue while trying to retrieve the status code from an HTTP request. Here's the code snippet used in a service :

checkIfSymbolExists() {
     return this.http.get(this.url, { observe: 'response' })
      .subscribe(response => {
        return response.status;
      });
  }

The returned value is then utilized in a method within one of my components in the following manner :

onSubmit() {
    console.log(this.stocks.checkIfSymbolExists());
}

Unexpectedly, instead of receiving a numerical value as desired, I am getting an object with the following structure:

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
closed: true
destination: SafeSubscriber {closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}
isStopped: true
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
_parent: null
_parentSubscription: null
_parents: null
_subscriptions: null
__proto__: Subscription

Interestingly, when I utilize console.log instead of simply returning response.status, I do see the expected 200 status code displayed (a number, not an object).

Any insights on why the behavior changes when returning the value of response.status? Thank you.

javascript angular typescript http angular7

Answer 1

Answer №1

You're not approaching it the right way. Here's a more effective method to achieve this:

Instead of subscribing directly to http.get, you should return a mapped response by using .pipe(map(...)):

import { map } from 'rxjs/operators';
...
checkIfSymbolExists() {
  return this.http.get(this.url, { observe: 'response' })
    .pipe(
      map(res => (res.status === 200))
    );
}

Next, you should return the observable from checkIfSymbolExists and then subscribe to it in the onSubmit method:

onSubmit() {
  this.stocks.checkIfSymbolExists()
    .subscribe(res => console.log(res));
  // If status is 200, true will be printed. Otherwise, false.
}

Explanation:

The purpose of your service method checkIfSymbolExists() is to provide the Component with the desired data. The Component doesn't need to know the source of this data; it just needs to receive a boolean upon subscribing to the Observable returned by checkIfSymbolExists()

In checkIfSymbolExists(), we have added the option to observe the complete response by utilizing { observe: 'response' }. Through the map operator, we are checking for the value of res.status to determine if it equals 200.

Based on the comparison result of ===, map will return either true or false depending on whether the status is 200 or not.

I hope this clarifies the process for you.

Answer 2

You're not approaching it the right way. Here's a more effective method to achieve this:

Instead of subscribing directly to http.get, you should return a mapped response by using .pipe(map(...)):

import { map } from 'rxjs/operators';
...
checkIfSymbolExists() {
  return this.http.get(this.url, { observe: 'response' })
    .pipe(
      map(res => (res.status === 200))
    );
}

Next, you should return the observable from checkIfSymbolExists and then subscribe to it in the onSubmit method:

onSubmit() {
  this.stocks.checkIfSymbolExists()
    .subscribe(res => console.log(res));
  // If status is 200, true will be printed. Otherwise, false.
}

Explanation:

The purpose of your service method checkIfSymbolExists() is to provide the Component with the desired data. The Component doesn't need to know the source of this data; it just needs to receive a boolean upon subscribing to the Observable returned by checkIfSymbolExists()

In checkIfSymbolExists(), we have added the option to observe the complete response by utilizing { observe: 'response' }. Through the map operator, we are checking for the value of res.status to determine if it equals 200.

Based on the comparison result of ===, map will return either true or false depending on whether the status is 200 or not.

I hope this clarifies the process for you.

Angular is not providing the anticipated outcome

Answer №1

Similar questions

Please ensure that all fields in the form are filled out before clicking the enable button

What is the most efficient way to dynamically load a script file before proceeding with the rest of the code execution?

Click on the input to add or remove a value

"Enhance your website with a sleek Bootstrap navigation system featuring dividers and

Alternatives to using $.getJSON()

Dynamically injecting a JavaScript script within a Vue.js application

Adjust the href link value when a new option is selected

Increasing the sms counter in javascript once it reaches 160 characters

The function dispatch is not recognized and will be removed from the database. An error will be generated indicating that dispatch is not a valid function

The themes showcased in the Bespoke.js documentation and demo exhibit unique designs

Creating a JSON File with an Illustrator Script

Securing string parameters in Django templates for JavaScript function usage

Is it possible to run Next.js 13 with React.js version 17?

Oops! Looks like you forgot to include the "reducer" argument. It is necessary and should be either a function or an object of functions that can be passed to combineReducers

Tips for updating a column with just one button in AngularJS

Tips for setting up a range slider for decimal numbers

Typescript encounters ERROR TS1128: Expecting a declaration or statement

Transclusion with multiple slots in AngularJS

The slash character is escaped by the RegExp constructor, but the dot character is

The data type 'StaticImageData' cannot be converted to type 'string'