create Observable<T> from result

Question

I am trying Angular2.

I noticed that the http service use Observable object instead of Promise (I don't like much that choice.. async/await are arriving).

In my service, I download a list of Plants from the webservice. Clicking on a plant I show the details using the routing. But in this way when I go back, the plants are downloaded again (because the constructor is called again).

To avoid this I want to do something like:

public getPlants(): Observable<Plants[]> {        if (this._plants != null)         return Observable.fromResult (this._plants); //This method does not exists       return this._http.get('../../res/heroes.json')... } 

Is there a way to do that? How can I import the Observable class in my ts file?

Thanks!

Answer 1

The method in TypeScript (or JavaScript for that matter) is called of. Learn rxjs has a nice tutorial as well

If you are using rxjs6 you get everything from rxjs

import { Observable, of } from 'rxjs';  public getPlants(): Observable<Plant[]> {   const mocked: Plant[] = [     { id: 1, image: 'hello.png' }   ];   // returns an Observable that emits one value, mocked; which in this case is an array,   // and then a complete notification   // You can easily just add more arguments to emit a list of values instead   return of(mocked); } 

---

In previous version you imported the operator of from a different location

import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of';  public getPlants(): Observable<Plant[]> {   const mocked: Plant[] = [     { id: 1, image: 'hello.png' }   ];   return of(mocked); } 

---

And before that you imported it as an extension for the Observable class

import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/of';  public getPlants(): Observable<Plants[]> {     // this can be changed to a member variable of course     let mocked: Plants[] = [{         id: 1,         image: "hello.png"     }];     return Observable.of(mocked); } 

Answer 2

This is my working solution:

if (this._heroes != null && this._heroes !== undefined) {     return Observable.create(observer => {         observer.next(this._heroes);         observer.complete();     }); } 

I hope that this is the best solution.