Is there a way to include two objects in an Angular2 post request?

Question

Is there a way to include two objects in an Angular2 post request?

This piece of code is giving me trouble:

On the client side (using Angular 2)

saveConfig(configType: ConfigTypes, gasConfigModel: GasConfigModel): any {
    console.info("sending post request");
    let headers = new Headers({
        'Content-Type': 'application/json'
    });

....

    return this.http
      .post(this.url, formParamString, ??, {headers: headers})
      .map(res => res.json())
      .subscribe(
        data => {
          console.info("next: ");
          console.info(data)
        },
        err => console.error(err)
      );
  }

Meanwhile, on the server side:

@Path("/SaveConfig")
@POST
@Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
@Produces(MediaType.APPLICATION_JSON + ";charset=utf-8")
public void saveConfig(MyObj my object, CountryGasStationConfig countryGasStationConfig) throws Exception {....}

I am familiar with sending one object in a post request, but how can I send two objects in a post request?

java http angular typescript jersey

Answer 1

Answer №1

As your data is in JSON format, combining two separate objects into a single document would result in invalid JSON. This poses a technical challenge.

One potential solution is to encapsulate these two objects within a wrapper object.

Request Object

public class SaveConfigRequest {
    private MyObj myObject;
    private CountryGasStationConfig countryGasStationConfig;

    //getters and setters
}

New Method Signature

public void saveConfig(SaveConfigRequest request)

Example JSON Structure

{
  "myObject": {...},
  "countryGasStationConfig": {...}
}

Answer 2

As your data is in JSON format, combining two separate objects into a single document would result in invalid JSON. This poses a technical challenge.

One potential solution is to encapsulate these two objects within a wrapper object.

Request Object

public class SaveConfigRequest {
    private MyObj myObject;
    private CountryGasStationConfig countryGasStationConfig;

    //getters and setters
}

New Method Signature

public void saveConfig(SaveConfigRequest request)

Example JSON Structure

{
  "myObject": {...},
  "countryGasStationConfig": {...}
}

Answer 3

Answer №2

If you need to send two objects with different key values, you can combine them into one big object like this:

let obj1;
let obj2;
let obj2send={
'obj1':obj1,
'obj2':obj2
};

Now the object obj2send contains both objects.

Answer 4

If you need to send two objects with different key values, you can combine them into one big object like this:

let obj1;
let obj2;
let obj2send={
'obj1':obj1,
'obj2':obj2
};

Now the object obj2send contains both objects.

Is there a way to include two objects in an Angular2 post request?

Answer №1

Answer №2

Similar questions

Combine Rest API with JSON into BPMN for React or Angular 8 along with TypeScript compatibility

How can I dynamically reference two template HTML files (one for mobile and one for desktop) within a single component in Angular 6?

Are you looking for a streamlined method to create styled components with MaterialUI?

Creating an image dynamically at runtime from a section of HTML code as it appears in the browser

Converting TypeScript query string values into GUIDs

Is it possible to replicate, modify, or recycle a purely HTML and CSS component in Angular?

Setting up Apache to work with Angular 2

The Updating Issue: Angular 2 Table Fails to Reflect Value Changes

Angular outputting a basic static value

Is there a way to implement a mask feature for a ComboBox in JavaFX?

Utilize the multipart/form-data approach for sending files with Angular 6

Optimize your code in Angular 5 by consolidating or restructuring numerous Subscribe calls

I am experiencing issues with the HTTPClient call not returning accurate JSON data within my Appcelerator Titanium application

The functionality of the String prototype is operational in web browsers, but it encounters issues

Function that yields promise result

Setting up ReactJS and TypeScript in a fresh MVC5 project from scratch

Displaying the Ionic loading spinner on the entire page rather than a restricted small box

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

Error: Java - unable to access field due to conflicting initialization

Retrieving the input[text] value in TypeScript before trimming any special characters