Unable to retrieve this information within an anonymous function

Question

Unable to retrieve this information within an anonymous function

I am currently working on converting the JSON data received from an API interface into separate arrays containing specific objects. The object type is specified as a variable in the interface.

Here is the interface structure:

export interface Interface{
  interfaceClassType: string;
}

The method to retrieve JSON data is as follows:

getJSON(): Observable<Interface[]> {
    return this.http.get<Interface[]>(URL)
      .pipe(
        retry(2),
        catchError(this.handleError)
      );
  }

To implement this, I have created the following code:

arrayWithObjects: Interface[];
 class1Array: Class1[];
 class2Array: Class2[];

 processJSON(): void {
    this.configService.getJSON().subscribe(results => this.arrayWithObjects = results);
    this.arrayWithObjects.forEach (function (object) {
      switch (object.interfaceClassType) {
        case "first":
          this.class1Array.push(object as Class1);
          break;
        case "second":
          this.class2Array.push(object as Class2);
          break;
      }
    }.bind(this))
  }

Even though the above implementation seems correct, calling it triggers an error message:

ERROR TypeError: this.class1Array is undefined

json angular typescript

Answer 1

Answer №1

Two important points need to be addressed in this scenario.

this.arrayWithObjects is assigned asynchronously, so when you try to use forEach, it may not be assigned yet. To fix this issue, consider moving the forEach inside the subscription block.

processJSON(): void {
  this.configService.getJSON().subscribe(results => {
    this.arrayWithObjects = results;
    this.arrayWithObjects.forEach (
      ...
    );
}

For more information on handling asynchronous data, visit this resource.

Instead of using conventional JS function, switch to arrow function notation to correctly reference class member variables with the this keyword. In a regular JS function, this refers to the function's scope rather than the class context.

processJSON(): void {
  this.configService.getJSON().subscribe(results => {
    this.arrayWithObjects = results;
    this.arrayWithObjects.forEach((object) => {       // <-- apply arrow function here
      switch (object.interfaceClassType) {
        case "first":
          this.class1Array.push(object as Class1);
          break;
        case "second":
          this.class2Array.push(object as Class2);
          break;
      }
    });               // <-- no need for `bind()` method
  });
}

Answer 2

Two important points need to be addressed in this scenario.

this.arrayWithObjects is assigned asynchronously, so when you try to use forEach, it may not be assigned yet. To fix this issue, consider moving the forEach inside the subscription block.

processJSON(): void {
  this.configService.getJSON().subscribe(results => {
    this.arrayWithObjects = results;
    this.arrayWithObjects.forEach (
      ...
    );
}

For more information on handling asynchronous data, visit this resource.

Instead of using conventional JS function, switch to arrow function notation to correctly reference class member variables with the this keyword. In a regular JS function, this refers to the function's scope rather than the class context.

processJSON(): void {
  this.configService.getJSON().subscribe(results => {
    this.arrayWithObjects = results;
    this.arrayWithObjects.forEach((object) => {       // <-- apply arrow function here
      switch (object.interfaceClassType) {
        case "first":
          this.class1Array.push(object as Class1);
          break;
        case "second":
          this.class2Array.push(object as Class2);
          break;
      }
    });               // <-- no need for `bind()` method
  });
}

Answer 3

Answer №2

When you utilize a standard function as a callback, it does not maintain the scope of this within it. However, employing an arrow function resolves this issue.

this.arrayWithObjects.forEach ((object) => {
      console.log(this.class1Array);
})

Answer 4

When you utilize a standard function as a callback, it does not maintain the scope of this within it. However, employing an arrow function resolves this issue.

this.arrayWithObjects.forEach ((object) => {
      console.log(this.class1Array);
})

Unable to retrieve this information within an anonymous function

Answer №1

Answer №2

Similar questions

There is no universal best common type that can cover all return expressions

Display responsive input field based on selected option in ionic2 dropdown menu

Discover the outcome of clicking on an object (mock tests)

I'm puzzled as to why I am unable to retrieve the values from this array or parse the JSON data

My npm init script is failing to work properly. What steps can I take to troubleshoot

Obtain information from a PHP file using AngularJS 2

Using AngularJS to filter JSON data

What causes the Angular router URL to vary from the document location on reload while employing CanActivate?

What could be the reason my component is not displaying the ContentChild associated with a directive?

Learn how to use jQuery to load a text file containing arrays and then format them as

VScode has identified potential problems with modules that utilize Angular Ivy, however, this should not cause any major issues

How to shuffle the elements of an array saved in a JSON file using discord.js

Leveraging getStaticProps in Next.js

How to retrieve properties of the final item in an array using Vue.js

Error: The post method in $setup is not defined in Vue Composition API

The SetInterval function will continue to run within a web component even after the corresponding element has been removed from the

Replacing the previous observation

Updating a JSON file with new object using node.js

Best practices for utilizing forwardRef and next/dynamic in next.js version 13.4 with the "react-email-editor" component

The script ceases to function once the page is loaded from a JSON file