The below is my .ts file for the Alarm Component and over HTML I am using a simple *ngFor over criticalObject.siteList to display the records This is not the original code I have simplified this but the problem I am facing is that on rigorous click on the refresh button(fires HTTP request), the list is adding duplicate siteNames and that should not happen. I have heard of debounce time, shareReplay, and trying applying here, which even doesn't make sense here. NOTE: I have to fire the HTTP request on every refresh button click. Keenly Waiting for Help.

criticalObject.siteList = [];
siteList = ["c404", "c432"];
 
onRefresh() {
 this.criticalObject.siteList = [];
 this.siteList.forEach(elem => {
  getAlarmStatus(elem);
 })
}

getAlarmStatus(item) {
 critical_list = [];
 alarmService.getAlarmStatusBySite(item.siteName).subcribe(data => {
  if(data) {
  // do some calculations
   if(this.criticalObject.siteList.length === 0) {
     this.criticalObject.siteList.push({
     siteName = item.siteName;
    })
   }
   this.criticalObject.siteList.forEach((elem, idx) => {
    if(elem.siteName === item.siteName) {
     return;
    } else if(idx === this.criticalObject.siteList.length - 1) {
      this.criticalObject.siteList.push({
       siteName = item.siteName;
       })
    }

   })
   }
  }
})