Hello, I am currently delving into Angular2 and encountering a problem concerning RestAPI. When I send a post request to the server with a JSON file, I intend to update the existing data in the JSON file; however, what actually happens is that the new data gets appended instead. Here's an excerpt of my code:
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(url, body, options).map((res:Response) => res.json())
.subscribe((body) => body );
The original content of my JSON file is as follows:
{
"budget": [
{
"service": "electricity",
"real_amount": 100,
"expected_amount": 100,
"id": 0
}
]
}
After sending the post request, the JSON file ends up looking like this:
{
"budger":
{
"service": "electricity",
"real_amount": 100,
"expected_amount": 100,
"id": 0
}
],
{
"service": "electricity",
"real_amount": 100,
"expected_amount": 100,
"id": 0
}
]
}
In my TypeScript file :
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) => {
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< 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) => res.json())
.subscribe((body) => body );
}
}
In my html file :
<div id="main">
<div id="right_side">
<div class="form-group row">
<label>Choose a service</label>
<select [(ngModel)]="service">
<option *ngFor="let item of data?.budget"
ngDefaultControl >{{item.service}}</option>
</select>
<label>Enter an amount</label>
<input id="real_amount" type="text"
[(ngModel)]="real_amount" ngDefaultControl>
<input type="submit" value="Pay"
(click)="updateBudget(service,real_amount)">
</div>
</div>
<div id="left_side">
<table>
<thead>
<th>Service</th>
<th>Expected Expencies</th>
<th>Real Expencies</th>
</thead>
<tbody>
<tr *ngFor="let item of data?.budget">
<td>{{item.service}}</td>
<td>{{item.expected_amount}}</td>
<td>{{item.real_amount}}</td>
</tr>
</tbody>
</table>
</div>
</div>
If anyone has suggestions or solutions to provide, I'd greatly appreciate it. Thank you!