Do you now how i can update a json in a function ? (API,Angular)

Question

So i have following JSON:

.json
"type": [ {
      "id": 2,
      "secondid": "1",
      "name": "f",
      "positionX": 0,
      "positionY": 0
}]

and following Service:

public updateposition(Model: typemodel): Observable<any> {
      return this.http.post(this.apiEndPoint + '/type' + '/' + typemodel.id , typemodel);
   }

and following TS:

.ts
 x: number;
 y: number;

updateposition()
{

}

So the goal is to update the json object "type" by clicking a button with html. The html part is no problem. But i don't know how to update the json object with the two new positions x and y which are declared in ts. I want to have the process in the function updateposition(). Do you have any suggestions :) ?

Answer 1

You would have to use Dependency Injection to obtain a reference to the Service in your component and use it to retrieve and store the JSON object. Then update it like you would any other object in JS when the button is clicked, and make the API call. Be sure to subscribe to the result or the API call will not go through.

// ...
export class MyComponent {
  public jsonObject: TypeModel = { ...  };
  public constructor(private service: Service) { }

  // ...

  public function updateposition() {
    this.jsonObject[0].positionX = 52;
    this.jsonObject[0].positionY = 42;
    this.jsonObject = this.service.updateposition(this.jsonObject).subscribe(
      result => {
        console.log("The API call returned", result);
      }
    );
  }
}