HttpClient not returning data

Question

I have the following scenario:

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const baseUrl: string = 'https://example.com/api/v1';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getSingleUser(mail: string) {
    console.log('Getting info from:');
    var url: string = baseUrl + '/users/' + mail;
    console.log(url);
    return this.http.get(url);
  }
}

login.component.ts

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { ApiService } from 'app/api.service';

@Component({
  selector: "login-cmp",
  moduleId: module.id,
  templateUrl: "login.component.html"
})
export class LoginComponent implements OnInit {
  private userProfile: any = [];
  private email: string = '[email protected]';

  constructor(private router: Router, 
              private apiService: ApiService) {}

  ngOnInit() { }

  signIn(provider: String): void {    
        console.log('Starting http for ' + this.email);   

        this.apiService.getSingleUser(this.email)
          .subscribe(data => {
            console.log('entered subscribe');
            console.log(data);
          });        
        console.log('Finished getting data.');
      }
    });
  }
}

And this is the output on my console:

Starting http for [email protected]
Getting info from:
https://example.com/api/v1/users/[email protected]
Finished getting data.

What I can see in the log is that the method getSingleUser is being called (messages 2 and 3 are generated by the method), but the commands inside the subscribe block are not being executed and I do not understand why.

Answer 1

It's likely your HTTP request is returning an error, and in your subscribe you are not specifying what to do when you get an error response.

Try changing this:

this.apiService.getSingleUser(this.email)
    .subscribe(data => {
        console.log('entered subscribe');
        console.log(data);
    });

To this:

this.apiService.getSingleUser(this.email)
    .subscribe(
        data => {
            console.log('entered subscribe');
            console.log(data);
        },
        error => {
            console.log('received an error', error);
        },
    );

As a rule of thumb, always do something with error responses from promises/observables, even if that's just printing them to the browser's console as that will help you find issues easier.

Also, check the "DevTools" of your browser (Network tab) you'll see the GET response is going out, and it's ending with an error.

Answer 2

this is not the best practice but the logic is correct. first thing you want to check is if you are returning any data back from the backend. if not, you should try to return a json response which your subscribe function is expecting. secondly you will need to check your network response to know the exact details of that get request. also you can use postman for request testing to trigger that url. in your postman, past this on the url with a get request https://example.com/api/v1/users/[email protected] and see th exact response you are geetting for the request. but note. you need to return something from the backend for that request, else nothing will be displayed