CODEWITHSUNDEEP
angularobservable
UserR
UserR

Reputation: 451

Return a response object from http get in Angular

I'm new to angular and I've been trying to use http.get to get data from an API and assign it to a value in a component

This is the method which is used to get data

  public getByUserName(username:String):User{

     let res:CommonResponse;

     this.http.get<CommonResponse>(BASE_URL+'/'+username)
    .subscribe(  (response) => { res = response },
      error => this.errorHandler.handleError(error)
    )
    console.log("Response "+ res)
    return res.responseObj;
  }

When I print the result inside the subscribe function I get the result

But when I've tried to assign it to a local variable and return responseObj from res.

but the res object is undefined. Is there any other way to archive this functionality

Upvotes: 1

Views: 5007

Answers (3)

S&#225;ndor Jankovics
S&#225;ndor Jankovics

Reputation: 898

The reason you dont get any response is that all the HTTP method is async

You have two options to handle the problem

Use the observable provided by angular on itself

let res:ReplaySubject<CommonResponse>=new ReplaySubject(); 

public getByUserName(username:String):User{    
    this.http.get<CommonResponse>(BASE_URL+'/'+username)
    .subscribe(  (response) => { this.res.next(response) },
      error => this.errorHandler.handleError(error)
    )
  }

and then you can use the res REplaySubject to subscribe in your component.

Or if you are not really familiar with RxJs and Observables/ReplaySubject a simpler method is to convert the request to a promise and use await

public async getByUserName(username:String):User{
     let res:CommonResponse;    
     res= await this.http.get<CommonResponse>(BASE_URL+'/'+username).toPromise()
          .catch((error)=>{
              this.errorHandler.handleError(error)
                 })
      console.log("Response "+ res)
      return res.responseObj;
}

Upvotes: 2

Shivani
Shivani

Reputation: 64

Ideally you should return res.responseObj within the subscribe method. Or you can try -

 public getByUserName(username:String):User{

 let res:CommonResponse;

 return this.http.get<CommonResponse>(BASE_URL+'/'+username)
.subscribe(  (response) => { res = response.responseObj },
  error => this.errorHandler.handleError(error)
)

}

Upvotes: 0

munzld
munzld

Reputation: 279

You should move your console/return statement inside the subscribe like this:

public getByUserName(username:String):User{
this.http.get<CommonResponse>(BASE_URL+'/'+username).subscribe(  (response) => {
  console.log("Response "+ res);
  return res.responseObj;
},
error => this.errorHandler.handleError(error)

);

Your function won't wait for the subscribe to complete because it's asynchronous. That's why it's undefined when you try to access responseObj outside the subscribe.

Upvotes: 0

Related Questions