HTTP Request Unsubscribe doesn't work

Question

I'm fetching the data from json file in services and subscribing it from my component. I'm doing some condition check with the data, once it matches I want to stop subscribing but it's not working and still its subscribing.

Service

getUserData() {
     const url = './assets/json/userslist.json';
     return this.http.get(url);
}

Component

const subscription = this.getuser.getUserData().subscribe(data => {
  Object.values(data).forEach((userdetail) => {
    // tslint:disable-next-line:max-line-length
    if (userdetail.username.indexOf(form.value.email) !== -1 && userdetail.password == form.value.password) {
      console.log('asd');
      if (userdetail.active == true) {
        console.log('asasdfasd');
        this.EventEmitterObj.emit(form.value.email);
        this.router.navigateByUrl('/home');
      } else if (userdetail.active == false) {
        console.log('asd23423432');
        this.deactivateAlert = 'The account is deactivated';
      }
      subscription.unsubscribe();
      console.log('issue');
    } else {
      console.log('12341243');
      this.deactivateAlert = 'Incorrect Username/Password';
    }
  });
});

By the time you get your json from the http call the observable has completed. Check https://stackoverflow.com/questions/48516432/do-we-need-to-unsubscribe-from-http-calls-in-angular and https://stackoverflow.com/questions/35042929/is-it-necessary-to-unsubscribe-from-observables-created-by-http-methods — Tim Martens, Aug 21 '18 at 06:12
There is no need to unsubscribe .it will be automatically unsubscribe on request completion. — Akj, Aug 21 '18 at 06:19

Hamid Asghari · Answer 1 · 2018-08-21T06:21:19.270

Angular HTTPClient

The angular HTTPClient will unsubscribe automatically on request completion. That is either on success or on error.

Also at the time you are unsubscribing, the http request is already returned a success so it is completed.

What i am understanding from your code is that, you are expecting the unsubscribe to stop your loop. Unsubscribing a Subscription is not meant to stop your foreach loop. To stop the foreach loop simply use return or break.

Krishna · Answer 2 · 2018-08-21T06:30:14.723

-3

Your unsubscribe is inside the subscribe call.. It should be outside as the subscribe call will execute only after you get response from server.

If you want to unsubscribe request then you should unsubcribe it outside.

If you want to break the foreach loop then use return.

Let me know if you need any futher clarification

edited Aug 21 '18 at 06:30

answered Aug 21 '18 at 06:01

Krishna

543
5
23

HTTP Request Unsubscribe doesn't work

2 Answers2

Angular HTTPClient