create Observable 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!

If you're just trying angular2, may I suggest you to give [aurelia](http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.7/doc/article/getting-started) a try? ctrl-f for "httpclient" to see an example. It returns a Promise, like you want. — MikeSW, Jan 07 '16 at 16:26
shouldn't it be something like `Observable.just`? (it is what it is called in other languages) — njzk2, Jan 07 '16 at 19:28

Patrick · Accepted Answer · 2022-06-28T19:46:31.563

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);
}

I found that I needed to add `import 'rxjs/add/observable/of';` as well. — SergioL, Mar 08 '17 at 22:16
You can also `import from 'rxjs/Rx'` if you don't want to add all operators one by one. — LoganMzz, Jun 22 '17 at 08:18
I think this is older but i still wanted to keep this updated, Observable.create() is deprecated and suggesting to use new Observable(). and of() is also no longer in rxjs or deprecated. Or am i overlooking? — Ak777, Aug 12 '20 at 18:20

score 31 · Answer 2 · answered Jan 07 '16 at 19:14

31

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.

answered Jan 07 '16 at 19:14

user3471528

3,013
6
36
60

This is perfect. This saved me a lot of time; thanks! – b264 Feb 07 '17 at 00:01
2

what's type of variable/parameter `observer` ? – Ravinder Payal Jun 16 '17 at 13:53
2

It's a [Subscriber](https://github.com/ReactiveX/rxjs/blob/master/src/Subscriber.ts). See [Observable.create()](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-create) and [new Observable()](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-constructor-constructor) documentation. – LoganMzz Jun 22 '17 at 08:24
`of`, below, is a better solution. – Michael Lorton Apr 13 '18 at 17:55
3

I think this is older but i still wanted to keep this updated, Observable.create() is deprecated and suggesting to use new Observable(). and of() is also no longer in rxjs or deprecated. Or am i overlooking? – Ak777 Aug 12 '20 at 18:19
Truly helped! Short and clean :))) – Thien Nguyen Minh Sep 10 '21 at 08:03

create Observable from result

2 Answers2

Linked