I am working in Angular and I have a following situation:

my.service.ts has this class:

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

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

And myponent.ts calls it like this:

myData: MyClass[] = [];

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

VS Code recognizes the createString function as a metod of MyClass, but I still get an error:

ERROR TypeError: x.createString is not a function

Any explanations?

EDIT: The data es from back end, and the back end model doesn't have this method. Maybe that is the issue?

I am working in Angular and I have a following situation:

my.service.ts has this class:

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

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

And my.ponent.ts calls it like this:

myData: MyClass[] = [];

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

VS Code recognizes the createString function as a metod of MyClass, but I still get an error:

ERROR TypeError: x.createString is not a function

Any explanations?

EDIT: The data es from back end, and the back end model doesn't have this method. Maybe that is the issue?

• javascript
• angular
• typescript
• function

• 1 If you are transfering using JSON, you are only transfering data, not methods or classes. You need to have code that will reify JSON as your class. Without it... TS believes x should be a MyClass, so VSCode lets you do pletion; but x is in actuality probably just a POJO. – Amadan Commented May 21, 2019 at 8:17
• 1 The issue would be that the response you get is not your class objects, they are normal Javascript objects, create instances first – Ashish Ranjan Commented May 21, 2019 at 8:17
• 1 Possible duplicate of No methods in http response object – jonrsharpe Commented May 21, 2019 at 8:24
• 1 Also note that checking myData.length > 0 is pointless - if it's an empty array it'll just loop over zero things, and if it's not an array the check will likely fail to find a length property. – jonrsharpe Commented May 21, 2019 at 8:30
• 1 @jonrsharpe it's not just the length check - there is a lot of unnecessary code. The forEach in createString can just be replaced with this.MyList.join(", ") and the forEach for calling createString also strikes me as unnecessary - the string property could just have a dynamic getter that builds the the value on demand and caches it, instead of having to call an extra method to populate it on each element and each time the observable pushes an update. – VLAZ Commented May 21, 2019 at 8:37

2 Answers 2

The object ing from the server will be just a simple object not an instance of the class MyClass. You can create instances of MyClass and assign the values from the server object to the instance of the class:

this.myService.getMyData().subscribe(res => {
    myData = res.map(o => Object.assign(new MyClass(), o));
    if (myData.length > 0) {
        this.myData.forEach(x => x.createString());
    }
});

Accepted soulution didn't help me, so I propose mine. It does not require .map().

My http service:

getOffers() {
    return this.http.get('https://ohipo.pl/assets/oferty.json');
  }

Consuming service in ponent:

offers: Offer[] = [];

this.offersService.getOffers().subscribe((response: Offer[]) => {

      for (let i in response) {
        this.offers[i] = Object.assign(new Offer(), response[i]);
      }