How to return mocked Data in Observable?

Question

Suppose we have this method in a service that return an Observable:

getSearchResults(request: LocationSearchRequest){
      return this.http.get(this.getApiUrl(request))
            .map(res => <LocationSearchResponse> res.json())    
            .catch(this.handleError);    
}

How can I modify this code to return the mocked data ratehr then making an actual GET requesr?

import { MOCKEDDATA } from './mocked-data';

It's not a duplicate question. This has nothing to do with testing, jasmine and angualr2 testing api.

The solution was to use Observable.of(); Why is it marked as duplicate? This has nothing to do with testing, jasmine and angular2 testing api. — Artur Stary, Jun 20 '16 at 12:56

score 28 · Accepted Answer · answered Jun 24 '19 at 13:04

28

Xavi's answer is great and simple, but it didn't work for me - I tweaked it like so:

import { of } from 'rxjs';

And then:

return of(MOCKEDDATA);

Hope this helps someone else too!

answered Jun 24 '19 at 13:04

Joel Balmer

1,428
2
19
21

1

This is the syntax in newer versions of rxjs – Liam Dec 13 '19 at 09:10

score 15 · Answer 2 · answered Sep 01 '16 at 10:04

I had the same topic some time ago. It is also possible to use the method:

Observable.create()

It was solved by the code below (using typescript):

getElementTemplateNames() : Observable<string[]> {
let names : string[] = MockedElementData.getNames();
return Observable.create( observer => {
    observer.next(names);
    observer.complete();
});}

MockedElementData holds the data.

The import statement for Observable is:

import { Observable } from "rxjs/Observable";

score 8 · Answer 3 · answered Mar 30 '17 at 10:59

8

You can do:

Observable.of(MOCKEDDATA)

You can also add a delay:

Observable.of(MOCKEDDATA).delay(1000)

answered Mar 30 '17 at 10:59

Xavi

99
1
6

3

This no longer works: a functioning version can be found here https://stackoverflow.com/a/50866461/748253 – kumaheiyama Jun 20 '20 at 12:19

score 2 · Answer 4 · answered Jul 23 '20 at 20:18

I achieved this issue with the following code.

 this.treeService
          .getData()
          .pipe(takeUntil(this.destroy$))
          .subscribe(
            (fa) => {              
              this.Items = fa.map(f => new TreeviewItem(f));                          
              console.log('this.Items', this.Items);              
            }
          );

Take in consideration that your tree nodes needs to have in all levels. text: "text" value: "value"

How to return mocked Data in Observable?

4 Answers4