The function myFunction in TypeScript is not defined or recognized in this context

Question

The function myFunction in TypeScript is not defined or recognized in this context

I'm currently tackling a situation while working with Angular. Here's the scenario:

The my.service.ts contains the following class:

export class MyClass {
    MyList: string[] = [];
    MyString: string = '';

    createString(): void {
        this.MyList.forEach(s => {
            this.MyString += s + ', ';
        });
    }
}

And in my.component.ts, it is being utilized like this:

myData: MyClass[] = [];

this.myService.getMyData().subscribe(res => {
    myData = res;
    if (myData.length > 0) {
        this.myData.forEach(x => x.createString());
    }
});

Even though VS Code recognizes the createString function as a method of MyClass, an error persists:

ERROR TypeError: x.createString is not a function

Any insights into why this might be happening?

EDIT: The data originates from the backend, and the model on the backend lacks this method. Could that be causing the issue?

javascript angular typescript function

Answer 1

Answer №1

The data received from the server will be a basic object, not an actual instance of the MyClass. To work with instances of MyClass, you can create new instances and assign the values from the server object to them:

this.myService.getData().subscribe(response => {
    myData = response.map(obj => Object.assign(new MyClass(), obj));
    if (myData.length > 0) {
        this.myData.forEach(item => item.formatString());
    }
});

Answer 2

The data received from the server will be a basic object, not an actual instance of the MyClass. To work with instances of MyClass, you can create new instances and assign the values from the server object to them:

this.myService.getData().subscribe(response => {
    myData = response.map(obj => Object.assign(new MyClass(), obj));
    if (myData.length > 0) {
        this.myData.forEach(item => item.formatString());
    }
});

Answer 3

Answer №2

The solution I found on this issue didn't work for me, so I decided to come up with my own approach. This method doesn't rely on using the .map() function.

Here is my customized HTTP service:

retrieveData() {
    return this.http.get('https://example.com/data.json');
  }

Implementing the service in a component:

dataList: Data[] = [];

this.dataService.retrieveData().subscribe((response: Offer[]) => {

      for (let item in response) {
        this.dataList[item] = Object.assign(new Data(), response[item]);
      }

Answer 4

The solution I found on this issue didn't work for me, so I decided to come up with my own approach. This method doesn't rely on using the .map() function.

Here is my customized HTTP service:

retrieveData() {
    return this.http.get('https://example.com/data.json');
  }

Implementing the service in a component:

dataList: Data[] = [];

this.dataService.retrieveData().subscribe((response: Offer[]) => {

      for (let item in response) {
        this.dataList[item] = Object.assign(new Data(), response[item]);
      }

The function myFunction in TypeScript is not defined or recognized in this context

Answer №1

Answer №2

Similar questions

What is the best method to determine offsetTop in relation to the parent element instead of the top of

Finding the index of an array element with multiple sub-elements in JavaScript

Encircling the most recently selected image with a border

Ensuring Document's Uniqueness in MongoDB and NodeJS Before POST Request

My servlet is not providing any response to Java

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

Search through an array of objects in mongoose to verify if it includes a collection of strings

ReactJS: The state is reset to its original value after each update occurs

What is the best way to permit anonymous post requests while restricting unauthorized get requests in Django?

Using TypeScript in React, how can I implement automation to increment a number column in a datatable?

Trigger CSS animation when hovering over an SVG utilized as a border-image

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

Inserting documents into an array of objects in MongoDB

Vue.js methods bound as properties on a parent object

Trouble toggling Reactstrap navbar in my TypeScript project using NextJS

Implementing an interface by assigning a type interface to a class instance with additional properties

Incorporate additional query parameters into a dynamic route with React Router to enhance functionality

Issue encountered in *ngFor utilizing KeyValuePipe: ngtsc(2322)

Having trouble getting the React Hook useState to function properly after attempting to pass in a JSON object retrieved from an API call

Accessing query parameters in Loading UI on the server side of NextJS version 14