TypeScript: return Array as Observable

Question

How can I return an array as Observable in getTodoItems()?

It was Promise<Itodo[]> and I used Promise.Resolve(TodoItems) to return the array. But when I changed it to use Observable instead of Promise, I don't know how to return the data and couldn't make it work.

I tried Observable.of(TodoItems) but it doesn't know the .of function.

I keep getting these errors whatever I tried. Could you please help me with it? Thanks.

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

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/fromArray';

import { Itodo } from './todo'

const TodoItems: Itodo[] = [
    { todoId: 11, description: 'Mr. Nice' },
    { todoId: 12, description: 'Narco' },
    { todoId: 13, description: 'Bombasto' }
]

@Injectable()
export class TodoService {


    constructor(private _http: Http) {
    }

    getTodoItems(): Observable<Itodo[]> {

        return TodoItems.map((items => Itodo[]) => <Itodo[]>items);
    }

    addNewTodo(model: Itodo) {        
        TodoItems.push(model);
    }

    getTodoItem(id: number): Observable<Itodo> {
        return this.getTodoItems()
            .map((items: Itodo[]) => items.find(p => p.todoId === id));    }
}

Answer 1

Observable.of is the correct method you are looking for. On my project, I'm using rxjs5-beta6 and import { Observable } from 'rxjs/Observable'; was enough to use the of method. Depending on your project, you may need to explicitly import the of method.

If all fails, you may try using Observable.from(TodoItems) or even try creating your own observable which return your value.

e.g.

Observable.create((observer: Subscriber<any>) => { observer.next(TodoItems); observer.complete(); });