two rxjs .pipe() method in different view in same component gives same result although using two different method in service file in angular

Question

stackblitz.com/edit/angular-kendo-2grid check with this. If I am clicking next grid it should call new api and display data but it also changes previous data too

I have two different method in my single component which uses .pipe() method and refer to two different method in service file. which means they intended to give different result but give same result.

I am having a view which comes good and i am implement a new view on click on one of the list. I am getting new result fine but exist result updated to new one too.

In my service file:

methodOne(){
  return this.http
      .get(`https://jsonplaceholder.typicode.com/posts`, this.httpOptions)
       .pipe(
        map(
          res => {
            if (!res) {
              return res = '';
            } else {
              return res
            }
          }
        )
      )
      .pipe(
        tap(data => {
          this.data = data
        })
      )
      .subscribe(data => {
        super.next(data);
      });
  }
}

Initial First Method Works and Below second works too but When Second Works It changes result of first view too

methodTwo(){
  return this.http
      .get(`https://jsonplaceholder.typicode.com/newposts`, this.httpOptions)
       .pipe(
        map(
          res => {
            if (!res) {
              return res = '';
            } else {
              return res
            }
          }
        )
      )
      .pipe(
        tap(data => {
          this.data = data;
        })
      )
      .subscribe(data => {
        super.next(data);
      });
  }
}

In my component file:

comOne(value){
this.editService.methodOne(value);
    this.view = this.editService.pipe(map(
      data => process(data, this.gridState)
));
}

comTwo(value){
this.editService.methodTwo(value);
    this.view2 = this.editService.pipe(map(
      data => process(data, this.gridState)
));
}

Both Works but But When I Call comTwo(value) it changes the this.view result too, I want to to persist this.view result

this.editService.methodOne(value); this line does nothing. this.view = this.editService.pipe(map( data => process(data, this.gridState) this line should not work.You can't pipe a service (??). — Roberto Zvjerković
@ritaj , I have other code too. the code is working but When I click on comTwo , It also updates first view too — Manish Vashisth
So post more code, because what I can see makes no sense. Also stackoverflow.com/help/mcve — Roberto Zvjerković
I'm with @ritaj here. There are multiple things that make no sense. Why are methodOne() and methodTwo() exactly the same except for the url that is called. If they have the same logic it should be just one function with the url as input parameter. Also show the implementation of this.editService.pipe if that's a function you wrote! — frido
@ritaj if I am clicking on next grid in first grid it should call second api in second view , stackblitz.com/edit/angular-kendo-2grid — Manish Vashisth

anaval anaval · Accepted Answer · 2019-01-17T23:22:04

you are referencing the same variable on your editservice via "this.data"

  public read2(id) {
    this.tempId = id;
    if (this.data.length) {
    //this.data was already initialized during your .read() initialization
    //therefore if(this.data.length) will always be true
    //if you really want to maintain this data structure in your servicem
    //create a differnt property that holds the 2nd data. e.g. "this.data2"
      return super.next(this.data);
    }


    this.fetch2()
      .pipe(
        tap(data => {
          this.data = data;
        })
      )
      .subscribe(data => {
        super.next([data]);
      });
  }

and below is a real headache, fetch emits an array which is correct, fetch2 however emits a single object yet you are expecting it to be loaded on your grid

  private fetch(action: string = '', data?: any): Observable<any[]> {
    return this.http
      .get(`https://jsonplaceholder.typicode.com/posts`)
      .pipe(map(res => <any[]>res));
  }

  private fetch2(action: string = '', data?: any): Observable<any[]> {
    return this.http
      .get(`https://jsonplaceholder.typicode.com/posts/${this.tempId}`)
      .pipe(map(res => <any[]>res));
  }

so put this line on your ngOninit

this.view = this.editService.pipe(map(data => process(data, this.gridState)),filter(d=>d.total>0),take(1));

then on your service edit your read2

public read2(id) {
    this.tempId = id;
    this.data = [];
    if (this.data.length) {
      return super.next(this.data);
    }


    this.fetch2()
      .pipe(
        tap(data => {
          this.data = data;
        })
      )
      .subscribe(data => {
        //super.next(data); remove this line
        super.next([data]);
      });
  }

two rxjs .pipe() method in different view in same component gives same result although using two different method in service file in angular

1 Answers