Angular HttpClient get, wrong this object

Question

in my Angular App i make a simple call to a node.js server. the HttpClient "get" function returns the right answer. This answer I want to store in a variable of my component "interfaces". But in the "subscribe" function of the get request my "this" pointer doesn't point to my component. Instead it tells me that it is of type "SafeSubscriber". Any call to my member "interfaces" lead to the following error: TypeError: Cannot read property 'interfaces' of undefined

export class SettingsComponent implements OnInit {

public interfaces : string[];

constructor(private http: HttpClient) {
    this.interfaces = [];
    this.interfaces.push("huhu");

}

ngOnInit() : void {

    this.http.get('http://localhost:3000/settings/interfaces').subscribe((data) => {
        // Read the result field from the JSON response.
        console.log(data);
        this.interfaces.push("xxx");
        Object.keys(data).forEach(function(k) {
            console.log(k);
            this.interfaces.push("xxx");
        });
    }),
    err => {
      console.log("error " + err);
    }; 
}

}

As you can see I also tried to enter some values manually into the array just to make sure, that not the server response is causing the problem. Any help is appreciated.

I used this code as a blueprint which is from: https://angular.io/guide/http

@Component(...)
export class MyComponent implements OnInit {

  results: string[];

  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('/api/items').subscribe(data => {
      // Read the result field from the JSON response.
      this.results = data['results'];
    });
  }
}

this can be relative. If you want to test and be sure, store this as a variable. example using jQuery $('body').on('click','.previewButton',function() { var thisEL = $(this); }); This allows you to reference to correct instance of this when necessary. — roberthuttinger
– roberthuttinger, Commented Nov 15, 2017 at 19:34
yes but I though (or my understanding was), that the call of get(...).subscribe is a kind of closure were I can access my "this" point of the component. Or am I totally wrong?? — Markus Falkensteiner
– Markus Falkensteiner, Commented Nov 15, 2017 at 19:36
Im not sure about the particular instance, Im more familiar however with the general potential issues of this as a reference. In some cases these issues are universal. You can test by throwing it into a variable and dumping vars — roberthuttinger
– roberthuttinger, Commented Nov 15, 2017 at 19:38

Osman Cea · Accepted Answer · 2017-11-15 19:43:08Z

1

You're losing reference to the correct this in this statement:

Object.keys(data).forEach(function(k) {..})

Inside the function block code this refers to the calling context , which is the subscribe method itself, that's why interfaces is undefined, since it's not a property of the subscribe method.

You can change the function for a lambda en it should be fine:

Object.keys(data).forEach((k) => {..})

answered Nov 15, 2017 at 19:43

Osman Cea

1,4679 silver badges18 bronze badges

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

2 Comments

Kirk Larkin Over a year ago

Good spot. However, which is the subscribe method itself is not the case inside of the forEach. this will be undefined (the error message even says so).

Markus Falkensteiner Over a year ago

Thx a lot. That was it. changed to 'lambda' and it works as expected.

Collectives™ on Stack Overflow

Angular HttpClient get, wrong this object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related