Is there a way to update a JSON within a function in the context of API programming with Angular?

Question

Is there a way to update a JSON within a function in the context of API programming with Angular?

Here is the JSON data I am working with:

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

Alongside this data, I have a Service as shown below:

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

Additionally, in my TypeScript file, I have declared x and y variables like so:

.ts
 x: number;
 y: number;

updateposition()
{

}

The objective is to update the "type" object within the JSON by utilizing values of x and y upon clicking a button in HTML. The HTML implementation is not an issue. However, I am unsure about how to proceed with updating the JSON object using the new x and y positions defined in TypeScript. My intention is to execute this task within the updateposition() function. Any recommendations or suggestions are greatly appreciated :)

json angular typescript api service

Answer 1

Answer №1

To access the Service in your component and manipulate a JSON object, you must utilize Dependency Injection. With this, you can update the object in JavaScript upon a button click, followed by making an API request. Make sure to subscribe to the result for the API call to be successful.


// ...
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);
      }
    );
  }
}

Answer 2

To access the Service in your component and manipulate a JSON object, you must utilize Dependency Injection. With this, you can update the object in JavaScript upon a button click, followed by making an API request. Make sure to subscribe to the result for the API call to be successful.


// ...
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);
      }
    );
  }
}

Is there a way to update a JSON within a function in the context of API programming with Angular?

Answer №1

Similar questions

Various JSON Tag values occurring more than once

Utilize Angular2's input type number without the option for decimal values

I encountered an error message while running the Angular JS code that I had written, and I am unable to find a solution to resolve it

Navigating with Angular 6 - Utilizing Query Parameters within a designated secondary router outlet

Using spring web flow for efficient data transfer with ajax

Storing a variety of specification tables with varying amounts of data in a MySQL database

Managing JSON data for multiple images with different dimensions

Obtain a reference to a class using a method decorator

What is the best way to connect an object to an array using ngFor in Angular?

What role does enum play in typescript?

What causes the .getJSON function to return a MIME type error when trying to access the API

Inquiry on SSGHelpers and GetStaticProps functionality with parameterization

What are some strategies I can implement to effectively manage different errors and ensure the app does not crash

Exploring multilevel JSON data in MariaDB/MySQL to pinpoint a particular value

Exploring how to traverse a <router-outlet> within its container

Error encountered when implementing Angular Model Class within an array structure

Can a map key value be converted into a param object?

Best practice for handling HTTP Post requests, followed by downloading content through HTTP, and finally saving the data to Core Data

Creating a variable that is not defined and then converting it into

Calculate the total by subtracting values, then store and send the data in