methods in angular typescript class are null after http get

Question

I'm on Angular 2 and coded a class like so:

export class Book{
     title: string;
     author: string;
     read: integer;
     private: _author;

    constructor(author: string) {
        this._author = author
    }

     public incRead(times: integer){
        this.read = this.read + times;
     }
}

Then to get data from the server at a component:

this._httpClient.Get<Book[]>(url).subscribe(
     (books: Book[]) => {
         this.books = books;
     }
)

But I can't access the function book.incRead(3) in any of the members of the Books array in the component.

Maybe HttpClient Get method does not instantiate correctly or I'll have to map to another array to get access to the public method in the class.

I've tried some workaround but code gets unnecessarily dirt.

Please be kind. I have really done my homework and been unable to find a question about as clear as this.

EDIT

I've changed the class a bit and now I can go this way:

export class Book{
     title: string;
     author: string;
     read: integer;
     author: string;

    constructor() {
    }

     public incRead(times: integer){
        this.read = this.read + times;
     }

}

And to get data from the server (using this approach: HttpClient not running constructor) I can use Object assign

this._httpClient.Get<Book[]>(url).subscribe(
    (books: Book[]) => {
         const tempbooks = new Array<Book>();
         books.forEach(book => {
             tempbooks.push(Object.assign(new Book(),book);
        }
     }
)

Now it would be perfect adding a post function in the class using the Http service, but I'll open it in a new question.

Happy coding!

Josep.

I'm trying to use the incRead method on each object generated by the HttpClient get function. When httpClient gets the data (book array, only properties) the method is not available. — Josep Alacid
– Josep Alacid, Commented Dec 18, 2017 at 7:11

Carsten · Accepted Answer · 2017-12-18 07:47:01Z

1

You have to actually make book objects:

this._httpClient.Get<Book[]>(url).subscribe(
     (books: Book[]) => {
         this.books = books.map((b) => new Book(b));
     }
)

You have to create a constructor that takes an 'any' object:

constructor(book?: any) {
  if (book != null) {
    this.title = book.title;
    this.author = book.author;
    this.read = book.read;
  }
}

edited Dec 18, 2017 at 7:47

answered Dec 18, 2017 at 7:08

Carsten

4,22826 silver badges30 bronze badges

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

3 Comments

Josep Alacid Over a year ago

I have edited the code to add the constructor -and get it closer to the real behavior- where a property is initialized. Now the new Book(b) shows an error about the constructor parameters.

Josep Alacid Over a year ago

I'm sorry I can't mark as answered immediately. I need to test it, and the real class has a lot of properties and methods. Just let me try!

Josep Alacid Over a year ago

Well, just going down the road. I've found this stackoverflow.com/questions/46570775/… that avoids to create the constructor.

Collectives™ on Stack Overflow

methods in angular typescript class are null after http get

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related