title: How do I replace JSON data by sending post request. Currently, the data is appending to existing data
body: <p>I am pretty new on Angular2 and faced with an issue related to RestAPI. I send post request to the server where located JSON file. I would like to replace existing data in JSON file, but as result, I receive append data.
  This is my code:</p>
  
  <pre><code>let headers    = new Headers({ 'Content-Type': 'application/json' });
  let options    = new RequestOptions({ headers: headers });    
  this.http.post(url, body, options).map((res:Response) =&gt; res.json())
  .subscribe((body) =&gt; body );
  </code></pre>
  
  <p>My JSON file is :</p>
  
  <pre><code>  {
      "budget": [
        {
          "service": "electricity",
          "real_amount": 100,
          "expected_amount": 100,
          "id": 0
        }
      ]
   }
  </code></pre>
  
  <p>After and post request was sent, my JSON file started to be</p>
  
  <pre><code> {
    "budger":
    {
          "service": "electricity",
          "real_amount": 100,
          "expected_amount": 100,
          "id": 0
        }
      ],
      {
          "service": "electricity",
          "real_amount": 100,
          "expected_amount": 100,
          "id": 0
        }
      ]
  }
  </code></pre>
  
  <p>My ts file :</p>
  
  <pre><code>          import { Component, OnInit } from '@angular/core';
            import 'rxjs/add/operator/map';
            import { Injectable } from '@angular/core';
            import {Http, Headers,RequestOptions,Response} from 
           '@angular/http';
            import {ApiService} from './api.service';
            import { URLSearchParams } from '@angular/http';
  
           @Component({
              selector: 'app-root',
             templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
              })
              export class AppComponent implements OnInit {
  
            real_amount: string;
            service: string;
            expected_amount: string;
             public data;
            public real_data;
  
             constructor(private http: Http) {
               }
              ngOnInit(): void {
             this.http.get("./assets/data/expected_expensives.json")
            .subscribe((data) =&gt; {
              this.data = data.json();
              console.log(data.json());
               });
               }
              updateBudget() {
              console.log(this.service +" " + this.real_amount);
                console.log(this.data.budget.length);
                for(let i=0 ; i&lt; this.data.budget.length; i++)
                {
             if (this.data.budget[i].service === this.service)
              {
               console.log(this.data.budget[i].service);
               this.data.budget[i].real_amount=this.real_amount;
              }
           } 
  
   let body:any = JSON.stringify(this.data.budget);
   let url = "http://localhost:3000/budget";
   let response:any;
   let headers    = new Headers({ 'Content-Type': 'application/json' });
   let options    = new RequestOptions({ headers: headers });
  
    this.http.post(url, body, options).map((res:Response) =&gt; res.json())
   .subscribe((body) =&gt; body );
    }
  }
  </code></pre>
  
  <p>MY html file :</p>
  
  <pre><code>             &lt;div id="main"&gt;
                 &lt;div id="right_side"&gt;
                  &lt;div class="form-group row"&gt;
                    &lt;label&gt;Choose a service&lt;/label&gt;
                    &lt;select  [(ngModel)]="service"&gt;    
                      &lt;option *ngFor="let item of data?.budget" 
                         ngDefaultControl &gt;{{item.service}}&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;label&gt;Enter an amount&lt;/label&gt;
                    &lt;input id="real_amount" type="text" 
                    [(ngModel)]="real_amount" ngDefaultControl&gt;
                    &lt;input type="submit" value="Pay" 
                    (click)="updateBudget(service,real_amount)"&gt;
                     &lt;/div&gt;
                    &lt;/div&gt; 
                  &lt;div id="left_side"&gt;
                     &lt;table&gt;
                      &lt;thead&gt;
                       &lt;th&gt;Service&lt;/th&gt;
                       &lt;th&gt;Expected Expencies&lt;/th&gt;
                       &lt;th&gt;Real Expencies&lt;/th&gt;
                      &lt;/thead&gt;
                       &lt;tbody&gt;
                       &lt;tr *ngFor="let item of data?.budget"&gt;          
                        &lt;td&gt;{{item.service}}&lt;/td&gt;
                        &lt;td&gt;{{item.expected_amount}}&lt;/td&gt;
                         &lt;td&gt;{{item.real_amount}}&lt;/td&gt;
                       &lt;/tr&gt;        
                     &lt;/tbody&gt;
                   &lt;/table&gt;
             &lt;/div&gt;
             &lt;/div&gt;
  </code></pre>
  
  <p>Can someone suggest proper solution? 
  Regards.</p>