cannot read property of undefined angular 6

Question

I have a very simple service.ts file. I can console log the responeDataSent object.

  CallFunction() {
    this.http
      .post<{ someObject: any }>(
        'http://localhost:3000/apicall1',
        InputData
      )
      .subscribe(responseData => {
        this.responeDataSent = responseData;
        return this.responeDataSent;
      });
  }

In my component.ts file, how can I read this response. Please help.

  private context: any;
  ngOnInit() {
    this.context = this.service.CallFunction();
    console.log(this.context);  // comes undefined.

  }

Possible duplicate of How do I return the response from an asynchronous call? — Martin Parenteau
– Martin Parenteau, Commented Mar 25, 2019 at 21:48
remove thesubscribe from CallFunction() and subscribe inside the ngOnInit() — Jason White
– Jason White, Commented Mar 25, 2019 at 21:50
The service method CallFunction should return the observable. You should then subscribe to it in the component method, and do the processing in the callback. — Martin Parenteau
– Martin Parenteau, Commented Mar 25, 2019 at 21:50

norbitrial · Accepted Answer · 2019-03-25 21:54:45Z

1

I guess a better way to deal with this scenario is that your service function should return an Observable first:

CallFunction(): Observable<any> {
  this.http.post<{ someObject: any }>(
    'http://localhost:3000/apicall1',
    InputData
  );
}

Then in component.ts you can subscribe and the code can handle the response:

ngOnInit() {
  this.service.CallFunction().subscribe(responseData => {
    console.log('response', responseData);
  });
}

Read further about Observables: Observables

answered Mar 25, 2019 at 21:54

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hien Nguyen · Accepted Answer · 2019-03-26 00:22:55Z

This is my way to handle HttpClient request. Return http post/get after call in function.

CallFunction(InputData) {
        return this.http
          .post<{ someObject: any }>(
            'http://localhost:3000/apicall1',
            InputData
          );
      }

And use subscribe after call function.

private context: any;
  ngOnInit() {
this.service.CallFunction().subscribe(responseData => {
      this.context =  = responseData;
      // handle your data here
      console.log(this.context);  // comes undefined.
 } 
}

Collectives™ on Stack Overflow

cannot read property of undefined angular 6

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related