How to clear observable array before sending API call to refresh the data?

Question

I have an application that is calling an API every x seconds / minutes to get the most up-to-date data. However, I am having an issue where the data keeps doubling on refresh. How can i clear the data before fetching the most recent values? api-call.service.ts

  private _earthquakeData$ = new ReplaySubject<EarthquakeResponse>(1);


  constructor(private readonly httpClient: HttpClient) {
  }


  getEarthquakeData(): Observable<EarthquakeResponse> {
    // return the subject here
    // subscribers will will notified when the data is refreshed
    return this._earthquakeData$.asObservable();
  }

  refreshEarthquakeData(): Observable<void> {
    return this.httpClient.get<any>(this.url).pipe(
      tap(response => {
        // notify all subscribers of new data
        this._earthquakeData$.next({
          geometries: response.features.map(x => x.geometry),
          properties: response.features.map(x => x.properties)
        });
      })
    );

  }

and I am using this service in my app.component.ts

  private destroyed$ = new Subject();


  constructor(private readonly earthquakeService: EarthquakeService) {
  }

  ngOnInit() {
    this.earthquakeService.getEarthquakeData().pipe(
      takeUntil(this.destroyed$)
    ).subscribe(data => {
      this.data = data;
    });

    timer(0, 10000).pipe(
      takeUntil(this.destroyed$),
      tap(() => this.refresh = true),
      switchMap(() =>
        this.earthquakeService.refreshEarthquakeData())
    ).subscribe(() => {
      console.log('refreshed');
      this.refresh = false;
    });
    this.today = new Date();
  }

  onRefresh() {
    this.refresh = true;
    console.log('refreshed');
    this.earthquakeService.refreshEarthquakeData().subscribe(() => {
      this.refresh = false;
    });
  }

  ngOnDestroy() {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

in my other.component.ts

  ngOnInit() {
    this.earthquakeService.getEarthquakeData().subscribe(data => {
      this.data = data;
      this.generateMapData();
    });
  }

  generateMapData() {
    for (const g of this.data.geometries) {
      const tempData: any = {
        latitude: g.coordinates[0],
        longitude: g.coordinates[1],
        draggable: false,
      };
      this.mapData.push(tempData);
    }
    console.log(this.mapData);

  }

it is the mapData[] that keeps doubling in size everytime the api is called. Any help / info would be greatly appreciated. HS

Answer 1

  generateMapData() {
    this.mapData = [];
    //another way if js style notworking this.mapData = new Array<any>();  
    for (const g of this.data.geometries) {
      const tempData: any = {
        latitude: g.coordinates[0],
        longitude: g.coordinates[1],
        draggable: false,
      };
      this.mapData.push(tempData);
    }
    console.log(this.mapData);