Angular2 trying to get item in an array before array is populated

Question

I have an Angular2 service as follows. I am trying to use this as a shared service between multiple components. If it matters, the components are binding directly to the public books, and selectedBook properties I want to cache the list of books and the currently selected book on the service and only call populate these on the first call.

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class BookService {

    public books: Book[];
    public selectedBook: Book;

    constructor(private http: Http,
        private router: Router) {

        this.http.get('/api/book/list')
            .subscribe(result => this.books = result.json() as Book[]);
    }

    public getBooks() {
        return this.books;
    }

    public setSelectedBook(id) {
        this.selectedBook = this.books.filter(x => x.id == id)[0];
    }
}

The problem is that sometimes I'm trying to read the array or call setSelecteBook(id) before the array is actually populated, which causes a crash. I have been trying to find an example of how to use Observables, but I can't find a scenario close enough to mine to be able to figure out how to adapt it to solve my problem.

Answer 1

This doesn't initialise an array, it just tells the TypeScript compiler that this certain property is of this type. To actually have an array, instead of being undefined, you have to initialise it. This way the filter function will work:

@Injectable()
export class BookService {

    public books: Book[] = [];
    //...
}

Answer 2

You can initialise the array books in the constructor with an empty array.

You can also do a workaround and check the length before accessing the array.

public setSelectedBook(id) {
    if(this.books.length > 0) {
        this.selectedBook = this.books.filter(x => x.id == id)[0];
    }
}

Answer 3

As a cleaner solution i would subscribe from your book-detail component for example to the service method getBooksList.

Do the api call using this.bookService.getBooksList and as soon as the array is loaded select the desired book.