CODEWITHSUNDEEP
angularrefreshobservable
James
James

Reputation: 167

Angular4 - How do I refresh data from web-service in real time?

I am getting JSON data from web service. I currently have a web page that displays these data in real time, but does not display new value unless I refresh the page manually by pressing F5. How do I listen for new response and display recent data onto Html in real time? Please let me know if anything is unclear.

Thank you

Component

 ngOnInit(): void {
IntervalObservable.create(1000)
  .subscribe(() => {
    this.appService.getDataLN().subscribe(resLN => {
      //
      ];
      names.forEach(name => {
        this.findLastValueLN(resLN, name);
      })
    }, error => console.log(error))


    this.appService.getDataLS().subscribe(resLS => {
      let names = [
       //
      ];
      names.forEach(name => {
        this.findLastValueLS(resLS, name);
      })
    }, error => console.log(error)
    )}


  findLastValueLN(resLN, name: String) {
let index = resLN.Object.Table.findIndex(d => 
d.objectName[d.objectName.findIndex(objectName => objectName === name)]);
if (resLN.Object.Table[index].objectName == "status") {
  if (resLN.Object.Table[index].LastValue == "on") {
    let index_A = resLN.Object.Table.findIndex(actual =>

html

<div>{{this.arrLN_[0]</div>
//expected arrLN_[2] to be printed only when status is off.. 
<div>{{this.arrLN_[2]</div>

Upvotes: 1

Views: 3005

Answers (2)

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

you can declare a variable in your component:

result = Observable<any>;

and then call the service that way:

this.result = myservice.getDataLN();

in your html file, you can use async pipe to display always the new value without subscribing in the component.ts, so you will have this in your html file:

{{result | async }}

Upvotes: 1

vicbyte
vicbyte

Reputation: 3790

Is this something you are looking for?

ngOnInit(){
    IntervalObservable.create(1000)
        .subscribe(() => {
            this.appService.getDataLN().subscribe(res => {
                let names = [//some name fileds that I need to serach from JSON];
                names.forEach(name => {
                    this.findLastValueLN(res, name);
                })
            }, error => console.log(error););
            this.appService.getDataLK().subscribe(res => {
                let names = [//some name fileds that I need to serach from JSON];
                names.forEach(name => {
                    this.findLastValueLN(res, name);
                })
            }, error => console.log(error););
        }
      });
}

This will bascially poll your backend every second and update the results. :)

Might also want to look at the .takeWhile observable modifier, to make sure that code will run only when that component is active.

Upvotes: 0

Related Questions