title: Angular clear array
body: <p>I am trying to refresh my page on delete and refresh button, it gets new data but the issue is <code>new data will add to old ones</code> I need to clear old data before adding new data.</p>
  
  <h1>Code</h1>
  
  <pre><code>addresses: any[] = [];
  
  // loads first time data
  this.addressService.getAddresses().subscribe((res) =&gt; {
    for (let address of res['data']) {
      this.addresses.push(address);
    }
    this.hideLoading();
  });
  
  // refresh list items
  doRefresh(event) {
  console.log('Begin async operation');
  
  setTimeout(() =&gt; {
      console.log('Async operation has ended');
  
  // get new items in list
      this.addressService.getAddresses().subscribe((res) =&gt; {
      for (let address of res['data']) {
          this.addresses.push(address);
      }
      this.hideLoading();
      });
  
      event.target.complete();
  }, 2000);
  }
  
  //remove item and renew list items
  removeAddress(id: string){
  this.addressService.remove(id).subscribe(
      data =&gt; {
      this.alertService.presentToast(data['message']);
  
  //getting items (renew)
      this.addressService.getAddresses().subscribe((res) =&gt; {
          for (let address of res['data']) {
          this.addresses.push(address);
          }
          this.hideLoading();
      });
  
      },
      error =&gt; {
      this.alertService.presentToast(error['message']);
      }
  );
  }
  </code></pre>
  
  <blockquote>
    <p>I think that I need to clear <code>addresses: any[] = [];</code> before getting
    new items in my <code>doRefresh(event){..}</code> and <code>removeAddress(id:
    string){...}</code> functions to avoid duplicates.</p>
  </blockquote>
  
  <p>Any idea?</p>