mapping of angular model data to spring pojo class not working

Question

I'm trying to map angular model class to my spring model class. But, in spring model class it displays null for all the entities. Below is my code which i've used to do the same, but it fails to map angular model data to spring pojo class.

HeaderMappingDetails.java

public class HeaderMappingDetails{
    String Impressions;
    String Clicks;
    String Revenue;
    //getters and setters
}

headermappingdetails.ts

export class HeaderMappingDetails{
    public Impressions:string;
    public Clicks:string;
    public Revenue:string
}

add-client.component.ts

saveHeaders(){
   this.clientService.saveHeaders(this.headerMap).subscribe(
       res=>{
           console.log(res);       
       },error=>{
           console.log(error);
       }
   );     
}

client.service.ts

saveHeaders(mapHeaders:HeaderMappingDetails){

    let url = this.serverPath+'/user/saveHeaders';
    let tokenHeader = new Headers({
    'Content-Type' : 'application/json',
    'x-auth-token' : localStorage.getItem('xAuthToken')
 });
    console.log(JSON.stringify(mapHeaders));
    return this.http.post(
        url,JSON.stringify(mapHeaders),
        {headers :   tokenHeader}
    );

}

addClient.html

<form [hidden]="!showMapper" (ngSubmit)="saveHeaders()">
    <mat-form-field class="full-width">
        <mat-select placeholder="Map Impression As" [(ngModel)]="headerMap.Impression" id="Impression" name="Impression">
                <mat-option *ngFor="let option of mapper" [value]="option">{{option}}</mat-option>
            </mat-select>
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-select placeholder="Map Clicks As" [(ngModel)]="headerMap.Clicks" id="Clicks" name="Clicks">
            <mat-option *ngFor="let option of mapper"  [value]="option">{{option}}</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-select placeholder="Map Revenue As" [(ngModel)]="headerMap.Revenue" id="Revenue" name="Revenue">
            <mat-option *ngFor="let option of mapper"  [value]="option">{{option}}</mat-option>
        </mat-select>
    </mat-form-field>
    <button mat-raised-button type="submit" class="mat-primary">Save Mapped Headers</button>
</form>

HeaderMappingController.java

@PostMapping(value = "/saveHeaders")
public HeaderMappingDetails saveHeaders(@RequestBody HeaderMappingDetails headerMappingDetails) throws Exception {
    Integer clientId = Integer.parseInt(jedis.get("emailClientId"));
    boolean isSuccess = headerMappingService.saveHeaders(headerMappingDetails, clientId);
    return headerMappingDetails;
}

This is the response printed by angular in my console

{"Impression":"Campaign","Clicks":"Budget","Revenue":"Budget"}

Answer 1

first off, you should name your variables according to java language standards. In your case, make them start with a small letter (only classes should have capital first latters). Also, make all variables private:

public class HeaderMappingDetails{
    private String impressions;
    private String clicks;
    private String revenue;
    // getters and setters
}

Your angular code looks ok to me, i use it a bit differently:

saveHeaders(mapHeaders:HeaderMappingDetails){
    let url = this.serverPath+'/user/saveHeaders';
    const headers: HttpHeaders = new HttpHeaders();
    headers.set("content-type", "application/json");
    headers.set("x-auth-token", localStorage.getItem('xAuthToken'));
    const options = {
      headers: headers
    };
    console.dir(mapHeaders);
    return this.http.post(url, mapHeaders, options);
}

You don't need to stringify the object.

In your case, i also would recommend using an interface instead of an object for your typescript object:

export interface IHeaderMappingDetails {
    impressions: string;
    clicks: string;
    revenue: string;
}