How to create an Observable from static data similar to http one in Angular?

Question

I am having a service that has this method:

export class TestModelService {

    public testModel: TestModel;

    constructor( @Inject(Http) public http: Http) {
    }

    public fetchModel(uuid: string = undefined): Observable<string> {
        if(!uuid) {
            //return Observable of JSON.stringify(new TestModel());
        }
        else {
            return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
        }
    }
}

in the component's constructor I am subscribing like this:

export class MyComponent {
   testModel: TestModel;
   testModelService: TestModelService;

   constructor(@Inject(TestModelService) testModelService) {
      this.testModelService = testModelService;

      testService.fetchModel("29f4fddc-155a-4f26-9db6-5a431ecd5d44").subscribe(
          data => { this.testModel = FactModel.fromJson(JSON.parse(data)); },
          err => console.log(err)
      );
   }
}

This works if an object comes from the server but I am trying to create an observable that will work with the given subscribe() call for a static string (this happens when testModelService.fetchModel() does not receive an uuid) so there is seamless handling in both cases.

Steve Sanders · Accepted Answer · 2018-04-16 19:44:30Z

189

Perhaps you could try to use the of method of the Observable class:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return Observable.of(new TestModel()).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

edited Apr 16, 2018 at 19:44

Steve Sanders

8,6812 gold badges33 silver badges33 bronze badges

answered Feb 5, 2016 at 8:47

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

3 Comments

Michail Michailidis Over a year ago

That was awesome! It worked! I was trying many things like Observable.from() etc.. The API documentation for Observable isn't the cleanest/most user-friendly at this point! Thanks :)

vip Over a year ago

One thing if you're using version 6, you've to import { of } from 'rxjs'; and use of, instead of Observable.of.

Michail Michailidis Over a year ago

For Angular v7.x.x there is no .map() on the result of get so you need to do .pipe(map((res:any) => res.json())). See here: stackoverflow.com/a/35220045/986160

Armen Stepanyan · Accepted Answer · 2020-09-30 21:25:28Z

137

As of July 2018 and the release of RxJS 6, the new way to get an Observable from a value is to import the of operator like so:

import { of } from 'rxjs';

and then create the observable from the value, like so:

of(someValue);

Note, that you used to have to do Observable.of(someValue) like in the currently accepted answer. There is a good article on the other RxJS 6 changes here.

edited Sep 30, 2020 at 21:25

Armen Stepanyan

1,8761 gold badge18 silver badges36 bronze badges

answered Jul 13, 2018 at 2:27

VSO

12.8k28 gold badges119 silver badges203 bronze badges

Comments

Niel de Wet · Accepted Answer · 2016-10-25 12:35:14Z

23

Things seem to have changed since Angular 2.0.0

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
// ...
public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return new Observable<TestModel>((subscriber: Subscriber<TestModel>) => subscriber.next(new TestModel())).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

The .next() function will be called on your subscriber.

answered Oct 25, 2016 at 12:35

Niel de Wet

8,5549 gold badges69 silver badges104 bronze badges

2 Comments

Michail Michailidis Over a year ago

I have migrated to Angular 2.1.2.. The old way seems to be still supported.. Could you please elaborate why this is a better solution or is it the convention? I will then change it in all the places in my code and I will re-accept ..Thanks

Niel de Wet Over a year ago

@MichailMichailidis, with a month of retrospect, it seems to me both are equally valid, the main difference being that Thierry's solution requires you to import the of function of rxjs, like import 'rxjs/add/observable/of'

Druta Ruslan · Accepted Answer · 2018-11-03 11:12:14Z

14

This is how you can create a simple observable for static data.

let observable = Observable.create(observer => {
  setTimeout(() => {
    let users = [
      {username:"balwant.padwal",city:"pune"},
      {username:"test",city:"mumbai"}]

    observer.next(users); // This method same as resolve() method from Angular 1
    console.log("am done");
    observer.complete();//to show we are done with our processing
    // observer.error(new Error("error message"));
  }, 2000);

})

to subscribe to it is very easy

observable.subscribe((data)=>{
  console.log(data); // users array display
});

I hope this answer is helpful. We can use HTTP call instead static data.

edited Nov 3, 2018 at 11:12

Druta Ruslan

7,4122 gold badges31 silver badges40 bronze badges

answered Aug 30, 2017 at 14:18

Balwant Padwal

2714 silver badges8 bronze badges

1 Comment

Sudharshan Over a year ago

can you update the typo from observable.subscripe to observable.subscribe

danilo · Accepted Answer · 2024-02-28 03:54:20Z

6

As of May 2021 the new way to get an Observable from a value is:

importing:

import "rxjs/add/observable/of"
import { Observable } from "rxjs/Observable"

and using it, like so::

Observable.of(your_value)

edited Feb 28, 2024 at 3:54

answered May 22, 2021 at 18:49

danilo

9,6037 gold badges53 silver badges54 bronze badges

Comments

Rahul Dadhich · Accepted Answer · 2019-06-20 11:36:45Z

This way you can create Observable from data, in my case I need to maintain shopping cart:

service.ts

export class OrderService {
    cartItems: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
    cartItems$ = this.cartItems.asObservable();

    // I need to maintain cart, so add items in cart

    addCartData(data) {
        const currentValue = this.cartItems.value; // get current items in cart
        const updatedValue = [...currentValue, data]; // push new item in cart

        if(updatedValue.length) {
          this.cartItems.next(updatedValue); // notify to all subscribers
        }
      }
}

Component.ts

export class CartViewComponent implements OnInit {
    cartProductList: any = [];
    constructor(
        private order: OrderService
    ) { }

    ngOnInit() {
        this.order.cartItems$.subscribe(items => {
            this.cartProductList = items;
        });
    }
}

Collectives™ on Stack Overflow

How to create an Observable from static data similar to http one in Angular?

6 Answers 6

3 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related