how to refresh data every 5 second using observable - json

Question

I am quite new to angular2 and rxjs. I am trying to create an angular2 app that gets some data from jsonAPI,
i want to get data every 5 second,
i found a solution with Observable.interval(5000) but i have some error while compiling,
how to insert Observable.interval(500) in ngOnInit() code
please!!
import { Component, OnInit } from '#angular/core';
import { IProduct } from './product';
import { ProductService } from './product.service';
#Component({
templateUrl: 'app/products/product-list.component.html',
styleUrls: ['app/products/product-list.component.css']
})
export class ProductListComponent implements OnInit {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string;
errorMessage: string;
products: IProduct[];
constructor(private _productService: ProductService) {
}
toggleImage(): void {
this.showImage = !this.showImage;
}
ngOnInit(): void {
this._productService.getProducts()
.subscribe(products => this.products = products,
error => this.errorMessage = <any>error);
}
onRatingClicked(message: string): void {
this.pageTitle = 'Product List: ' + message;
}
}
productservice.ts
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import { IProduct } from './product';
#Injectable()
export class ProductService {
private _productUrl = 'api/products/products.json';
constructor(private _http: Http) { }
getProducts(): Observable<IProduct[]> {
return this._http.get(this._productUrl)
.map((response: Response) => <IProduct[]> response.json())
.do(data => console.log('All: ' + JSON.stringify(data)))
.catch(this.handleError);
}
getProduct(id: number): Observable<IProduct> {
return this.getProducts()
.map((products: IProduct[]) => products.find(p => p.productId === id));
}
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');
}
}

Answer 1

You need to modify inside your ProductService.ts as follows,
getProducts(){
Observable.interval(5000)
.flatMap(() => this.http.get(URL)
.map( res => res.json() )
.catch( (error:any) => Observable.throw(error.json().error || 'Server error') ) )
.subscribe(data => {
console.log(data)
})
}

Answer 2

make sure your service look like this and you don't miss any imports:
import 'rxjs/Rx';
import {Injectable} from '#angular/core';
import {Http} from '#angular/http';
#Injectable()
export class ProductService{
constructor(private _http:Http) {}
getData() {
return Observable.interval(5000).flatMap(() => {
return this._http.get(`URL GOES HERE`)
.map(res => res.json());
});
}
}
and in your component:
import { Component, OnInit } from '#angular/core';
import { ProductService } from './product.service';
export class ProductListComponent implements OnInit {
constructor(public _productService: ProductService) {}
ngOnInit() {
this._productService.getData()
.subscribe(data => this.products = data,
err => console.log(err));
}
}
This should work but make sure that you share any errors that you get in the console as your question is missing that.