TypeScript myFunction is not a function

Question

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.component.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 comes from back end, and the back end model doesn't have this method. Maybe that is the issue?

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 completion; but x is in actuality probably just a POJO. — Amadan
– Amadan, Commented May 21, 2019 at 8:17
The issue would be that the response you get is not your class objects, they are normal Javascript objects, create instances first — Ashish Ranjan
– Ashish Ranjan, Commented May 21, 2019 at 8:17
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
– jonrsharpe, Commented May 21, 2019 at 8:30
@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
– VLAZ, Commented May 21, 2019 at 8:37

Titian Cernicova-Dragomir · Accepted Answer · 2019-05-21 08:18:07Z

6

The object coming 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());
    }
});

answered May 21, 2019 at 8:18

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

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

Comments

mjacob · Accepted Answer · 2022-10-18 13:07:58Z

0

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 component:

offers: Offer[] = [];

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

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

answered Oct 18, 2022 at 13:07

mjacob

17 bronze badges

1 Comment

Carrm Over a year ago

Besides the fact that using map is cleaner than a for loop, it's basically the same answer as the accepted one. If you encountered another issue you should explain what it was and how your version solves this issue.

Collectives™ on Stack Overflow

TypeScript myFunction is not a function

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related