1

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?

9
  • 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 completion; but x is in actuality probably just a POJO.
    – Amadan
    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 May 21, 2019 at 8:17
  • 1
    Possible duplicate of No methods in http response object
    – jonrsharpe
    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
    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
    May 21, 2019 at 8:37

2 Answers 2

5

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());
    }
});
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]);
      }
1
  • 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.
    – Carrm
    Oct 24, 2022 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.