HTTP response caching and nexting in BehaviourSubject in AngularJS 2/4

Question

I have 2 sibling component having a service which has HTTP call to render a json. OnInit, the Component B fetches the HTTP response calling the service and loads the screen. The click event on the Component A, should make the component B to refresh its data.

I followed the answer posted by ObjectiveTC from -> What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

    _docdata: BehaviorSubject<DetailSection[]> = new BehaviorSubject<DetailSection[]>([]);

service.getData(){return  this.http.get(this.url)
        .map((res) =>{this._docdata = (res.json()); console.log("1st return"); return this._docdata; })     
        .catch((error:any) => Observable.throw(error|| 'Server error'));  }

This worked fine.

refresh(){
this.http.get("../../assets/reqd-detail.json")
        .map(res => res.json())
        .subscribe((data:Array<DetailSection>) => this._docdata.next(data));
}

getting error --> ERROR TypeError: _this._docdata.next is not a function at SafeSubscriber._next (detail.service.ts:156) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185) at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125) at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (

score 0 · Answer 1 · answered Oct 04 '17 at 09:49

0

The problem is inside your map function you are overriding the _docData to an response object(that is of type Array) not as observable. And that does not have next function on it.

Try this

_docdata: BehaviorSubject<DetailSection[]>;

service.getData(){return  this.http.get(this.url)
        .map((res) =>{
             let detailSections = res.json();
             this._docdata = new BehaviorSubject<DetailSection[]>(detailSections); 
             console.log("1st return"); 
             return detailSections; })     
            .catch((error:any) => Observable.throw(error|| 'Server error'));  }

answered Oct 04 '17 at 09:49

Deepak Sharma

1,873
10
23

Thanks for the reply. But i am getting error for _docdata.next() in the refresh() method Error => ERROR TypeError: _this._docdata.next is not a function – aabbcc Oct 04 '17 at 10:15
Yes the reason you were getting error in refresh because in getData you initialized _docData with an object not with BehaviourSubject. Did you try the above code? – Deepak Sharma Oct 04 '17 at 10:17
Now refresh() worked fine. But getData() is not rendering the response. refresh (){ return this.http.get("../../assets/reqd-detail.json") .map(res => res.json()) .subscribe((data:DetailSection[]) =>{ this._docdata.next(data);console.log(this._docdata)}, (err: any) => console.error("fetch: ERROR",err), () => console.log("fetch: always")); } – aabbcc Oct 04 '17 at 10:46
Are you using getData directly or through _docData? – Deepak Sharma Oct 04 '17 at 10:47
It should return the value as we are returning whatever response coming from get in addition to assigning it to _docData. Did you copy the entire code specially the last line return detailSections? – Deepak Sharma Oct 04 '17 at 10:49
Yes copied the entire code. I am using getData() through _docdata – aabbcc Oct 04 '17 at 11:02

score 0 · Answer 2 · answered Oct 05 '17 at 05:42

The code below worked fine for me.

Subject variables

_docdata: BehaviorSubject = new BehaviorSubject([]); docdata: Observable = this._docdata.asObservable();

getData() / refresh () { return this.http.get(this.url) .map(res => res.json()) .subscribe((data:DetailSection[]) =>{ this._docdata.next(data);console.log(this._docdata)}, (err: any) => console.error("fetch: ERROR",err), () => console.log("fetch: always"));}
Fetched the response in the Components as :

this.detailService.getPageData(key,srcFrom); this.detailService.docdata.subscribe((dataList) => {this.dataList = dataList;console.log("dataList from component",this.dataList);});

HTTP response caching and nexting in BehaviourSubject in AngularJS 2/4

2 Answers2