Vfrdtyky

I have a get method that retrieves data from an API with values that changes every minute. This data needs to be multiplied with static data every minute and displayed back to the user . I have decided to use the pipe to handle this transaction since this data will be used frequently throughout the app itself.

My issue is that when implementing this pipe, running in a loop it takes the last static value of that was piped in and changes it for all values that have already passed.

I want the multiplied value for the individual static value that is passed. and returned back to the UI as an observable.

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  constructor(private service: AppService,private http: HttpClient) {}

  private fetchDataTemp$: Observable<any>;



  private killTrigger: Subject<void> = new Subject();



  private refreshIntervalTemp$: Observable<any> = timer(0, 60000)

    .pipe(

      // This kills the request if the user closes the component 

      takeUntil(this.killTrigger),

      // switchMap cancels the last request, if no response have been received since last tick

      switchMap(() => this.fetchDataTemp$),

      // catchError handles http throws 

      catchError(error => of('0'))

   );



  getData() {

    return this.http.get("https://jsonplaceholder.typicode.com/posts/42")

      .pipe(

        retry(3),

        share()

      );

  }



  public tempdata$: Observable<any> = this.refreshIntervalTemp$;

  fakedata = [1,2,3];



  ngOnInit() {  

    this.fakedata.forEach(element => {

      this.tempdata$.subscribe(data => { console.log(data,"test"); }); 

      console.log(element);  



      this.fetchDataTemp$ = this.getPrice().pipe(

        map(

          (response) => {

            console.log(element*response.id as number)

            return response.id;

          },

          share()

        )

      ); 

    });

  }

}

The code above is very similar to the scenario to what I want to achieve.
the fakedata is the data passed into the pipe, and the foreach is the ngFor loop running with async. the url https://jsonplaceholder.typicode.com/posts/42
returns static data in this case, so I am able to keep data consistent response.id is 42. when running this code the results are

1

2

3

126 test 

126 test 

126 test  

What I expect is

 1

 2

 3

 42 test

 84 test

 126 test

I pinpointed the issue to the map() but I don't know how to force the map to handle values one at a time and return them accordingly.

Thanks in advance!