Angular2: convert array to Observable

Question

I have a component that gets the data from a service via http, the problem is that I don't want to hit the API backend every time I show this component. I want my service to check if the data is in memory, if it is, return an observable with the array in memory, and if not, make the http request.

My component

import { Component, OnInit } from 'angular2/core';
import { Router } from 'angular2/router';

import { Contact } from './contact';
import { ContactService } from './contact.service';

@Component({
    selector: 'contacts',
    templateUrl: 'app/contacts/contacts.component.html'
})
export class ContactsComponent implements OnInit {

    contacts: Contact[];
    errorMessage: string;

    constructor(
        private router: Router,
        private contactService: ContactService) { }

    ngOnInit() {
        this.getContacts();
    }

    getContacts() {
        this.contactService.getContacts()
            .subscribe(
                contacts => this.contacts = contacts,
                error => this.errorMessage = <any>error
            );
    }
}

My service

import { Injectable } from 'angular2/core';
import { Http, Response, Headers, RequestOptions } from 'angular2/http';
import { Contact } from './contact';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ContactService {

    private contacts: Array<Contact> = null;

    constructor(private http: Http) {

    }

    getContacts() {
        // Check first if contacts == null
        // if not, return Observable(this.contacts)? <-- How to?

        return this.http.get(url)
            .map(res => <Contact[]>res.json())
            .do(contacts => {
                this.contacts = contacts;
                console.log(contacts);
            }) // eyeball results in the console
            .catch(this.handleError);
    }


    private handleError(error: Response) {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

Eric Martinez · Accepted Answer · 2016-02-20 18:56:03Z

99

You're right there. If you already have the data in memory, you can use of observable (equivalent of return/just in RxJS 4).

getContacts() {

    if(this.contacts != null) 
    {
        return Observable.of(this.contacts);
    } 
    else 
    {
        return this.http.get(url)
            .map(res => <Contact[]> res.json())
            .do(contacts => this.contacts = contacts)
            .catch(this.handleError);
    }
}

answered Feb 20, 2016 at 18:56

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

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

4 Comments

Evan Plaice Over a year ago

This is probably a dumb question but couldn't you just cache the observable itself and call .next() rather than caching the state and recreating the observable on each call?

Mathius17 Over a year ago

Good point, I'll try it. Though it my not be the best for when I want to iterate the array to return a single contact by a specific key

Sal Over a year ago

import 'rxjs/add/observable/of';

David Sagang Over a year ago

@Eric Martinez, thanks for your answer. Where do you get the of from. I imported that from 'rxjs' however it is not in the Observable.

upe · Accepted Answer · 2022-06-19 14:23:20Z

54

import { of } from 'rxjs';
    
return of(this.contacts);

edited Jun 19, 2022 at 14:23

upe

2,1821 gold badge26 silver badges40 bronze badges

answered Nov 1, 2018 at 12:27

Mo D Genesis

6,4171 gold badge27 silver badges39 bronze badges

Comments

upe · Accepted Answer · 2022-06-19 21:05:51Z

16

In angular7 its enough to just put the of(). Whatever you put inside of() will be changed to observable. Here, this.contacts is converted to observable.

import { of } from 'rxjs';

getContacts() {
    if (this.contacts != null) {
        return of(this.contacts);
    }
}

edited Jun 19, 2022 at 21:05

upe

2,1821 gold badge26 silver badges40 bronze badges

answered Feb 26, 2019 at 15:02

kavinbalaji

1611 silver badge4 bronze badges

1 Comment

Daniel Methner Over a year ago

This leads to: Error: Module not found: Error: Package path ./add/observable/of is not exported from package ...\node_modules\rxjs (see exports field in ...\node_modules\rxjs\package.json)

sancho21 · Accepted Answer · 2017-12-13 10:58:03Z

Some people like me want it differently, which is from string[] into Observable<string>.

This is an example which involves the conversion:

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

const ids = ['x12', 'y81'];
let userUrls: string[];

from(ids) // Converting string[] into Observable<string>
  .map(id => 'http://localhost:8080/users/' + id)
  .toArray()
  .subscribe(urls => userUrls = urls);

Hopefully it will help some others.

upe · Accepted Answer · 2022-06-17 15:55:34Z

1

Quick solution here:

getSomething(): Observable < Object[] > {
    return new Observable(observable => {
        this.http.get('example.com').subscribe(results => {
            observable.next(results.json());
            observable.complete();
        });
    });
}

edited Jun 17, 2022 at 15:55

upe

2,1821 gold badge26 silver badges40 bronze badges

answered Nov 29, 2017 at 21:15

Mr.Zon

1957 bronze badges

Comments

Harry Sarshogh · Accepted Answer · 2019-06-19 10:07:52Z

0

You can also use Observable.of(resultArray);

from the import { Observable } from 'rxjs;' package

answered Jun 19, 2019 at 10:07

Harry Sarshogh

2,2073 gold badges28 silver badges49 bronze badges

1 Comment

Daniel Methner Over a year ago

This leads to "Property 'of' does not exist on type 'typeof Observable'.ts(2339)"

upe · Accepted Answer · 2022-06-18 14:07:29Z

This might be extremely late in coming, but I've been using sessionStorage pretty heavily to handle some of my work. If you lose state because people were bouncing around, you still have your data.

getSubjects(): Observable < Subject[] > {
    let SubjectsString = sessionStorage.getItem("Subjects");

    if (SubjectsString) {
        let subjects: Subject[] = JSON.parse(SubjectsString);
        console.log("GETTING DATA FROM SESSION STORAGE");
        return Observable.of(subjects);
    } else {
        let url = `${this.apiHost}/api/subject`;
        return this.http.get(url)
            .map(res => {
                sessionStorage.setItem("Subjects", JSON.stringify(res.json()));
                return res.json();
            });
    }
}

In this example, I've got a class for Subject and a definition for apiHost, but the rest is pretty simple. You call the service for an observable. Your component has no idea where the data is and it doesn't care. The service checks local storage and, if it has it, converts it into an observable and returns it, if it doesn't, it goes and gets it, then saves it to local storage and then returns it.

In my case, I have some huge applications with hundreds of pages. Users might bounce from a nice new Angular4 page, over to a classic ASP age and back again multiple times. Having all menu items and even search results in sessionstorage has been a lifesaver.

Collectives™ on Stack Overflow

Angular2: convert array to Observable

7 Answers 7

4 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Related