Using @RequestBody with a Map<String, String>[] in Spring Boot results in a collection of blank elements

Question

Using @RequestBody with a Map<String, String>[] in Spring Boot results in a collection of blank elements

My client side application is built with Angular. I am attempting to send a List of Map to a Spring Boot REST API, but it seems to be getting serialized as a List of empty items. I have also tried using an array Map[] and using a Map of Objects.

Below is the POJO definition :

public class ClasseurDTO {

    private Map<String,String>[] ongletGeneralite;
    
    public ClasseurDTO() {
    }

    public Map<String, String>[] getOngletGeneralite() {
        return ongletGeneralite;
    }

    public void setOngletGeneralite(Map<String, String>[] ongletGeneralite) {
        this.ongletGeneralite = ongletGeneralite;
    }
    
    @Override
    public String toString() {
        // parse ongletGeneralite object 
        String str = "";
        for (Map<String, String> map : ongletGeneralite) {
            for (Map.Entry<String, String> entry : map.entrySet()) {
                str += entry.getKey() + " : " + entry.getValue() + " ,";
            }
        }

        return "ClasseurDTO [ongletGeneralite=" + str + "]";
    }
}

This is the typescript type def:

export type ClasseurDTO = {
     ongletGeneralite: Map<string, string>[]
}

The method definition of the API :

@PostMapping("/public/observations/import-observations")
public ResponseEntity<String> importObservations(@RequestBody ClasseurDTO classeur) {
    observationService.importObservations(classeur);
    return ResponseEntity.ok().body("Importation terminée");
}

This is the http call:

importClasseur(classeur: ClasseurDTO): Observable<HttpResponse<{}>> {
    console.log("importClasseur", classeur)
    return this.http
    .post(`${this.resourceUrlPublic}/import-observations`, classeur, { observe: 'response' });
}

Here is the log on the client side just before calling the API https://i.sstatic.net/BKwIw.png

Here is the payload in the network debug tool https://i.sstatic.net/9gBts.png

Can anyone identify where the issue lies?

angular typescript spring-boot

Answer 1

Answer №1

After conducting further investigation and trying various approaches, I made a significant change to the input type by switching it to a string[][][] instead of using a List of Map. Surprisingly, this adjustment resulted in the nested items no longer being empty. To adapt to this modification, I expanded the definitions and implemented the following structure on the client side:

export class CellDataClasseur {
    cellData: string[] = []
}

export class LigneDataClasseur {
    ligneData: CellDataClasseur[] = [];
}
export class ClasseurDTO  {
     ongletGeneralite: LigneDataClasseur[] = [];

}

On the server side, I utilized the following plain old Java objects (POJO):

public class CellDataClasseur {
private List<String> cellData;

public List<String> getCellData() {
    return cellData;
}

public void setCellData(List<String> cellData) {
    this.cellData = cellData;
}
}

public class LigneDataClasseur {
private List<CellDataClasseur> ligneData;

public List<CellDataClasseur> getLigneData() {
    return ligneData;
}

public void setLigneData(List<CellDataClasseur> ligneData) {
    this.ligneData = ligneData;
}
}

public class ClasseurDTO {
private List<LigneDataClasseur> ongletGeneralite;

public List<LigneDataClasseur> getOngletGeneralite() {
    return ongletGeneralite;
}

public void setOngletGeneralite(List<LigneDataClasseur> ongletGeneralite) {
    this.ongletGeneralite = ongletGeneralite;
}
}

I am leaving the question open for discussion in case someone can provide insights on serializing Map or suggest improvements to my current solution.

Answer 2

After conducting further investigation and trying various approaches, I made a significant change to the input type by switching it to a string[][][] instead of using a List of Map. Surprisingly, this adjustment resulted in the nested items no longer being empty. To adapt to this modification, I expanded the definitions and implemented the following structure on the client side:

export class CellDataClasseur {
    cellData: string[] = []
}

export class LigneDataClasseur {
    ligneData: CellDataClasseur[] = [];
}
export class ClasseurDTO  {
     ongletGeneralite: LigneDataClasseur[] = [];

}

On the server side, I utilized the following plain old Java objects (POJO):

public class CellDataClasseur {
private List<String> cellData;

public List<String> getCellData() {
    return cellData;
}

public void setCellData(List<String> cellData) {
    this.cellData = cellData;
}
}

public class LigneDataClasseur {
private List<CellDataClasseur> ligneData;

public List<CellDataClasseur> getLigneData() {
    return ligneData;
}

public void setLigneData(List<CellDataClasseur> ligneData) {
    this.ligneData = ligneData;
}
}

public class ClasseurDTO {
private List<LigneDataClasseur> ongletGeneralite;

public List<LigneDataClasseur> getOngletGeneralite() {
    return ongletGeneralite;
}

public void setOngletGeneralite(List<LigneDataClasseur> ongletGeneralite) {
    this.ongletGeneralite = ongletGeneralite;
}
}

I am leaving the question open for discussion in case someone can provide insights on serializing Map or suggest improvements to my current solution.

Using @RequestBody with a Map<String, String>[] in Spring Boot results in a collection of blank elements

Answer №1

Similar questions

Unusual Behavior of Observable.concat() in Angular 4 with RxJS 5

What is the best way to retrieve the href attribute when working with cheerio?

`Where can I find both the old and new values in Angular mat-select?`

Tips for preventing Angular from requiring an additional tag for a child component

Leveraging Angular 2 and Typescript for crafting a cutting-edge Chrome application

Capturing page titles accurately for timeonsite tracker in a single-page Angular app is challenging when navigating to other pages

"The `ngClass` directive allows for applying classes as an `object` rather than just a simple `class` value

Utilize toggle functionality for page rotation with rxjs in Angular framework

One way in Angular to set a validator pattern regex that matches either one rule or the other, but

What is the Typescript definition of a module that acts as a function and includes namespaces?

Angular2 ngIf directive issue after initial button click

Convert your socket.io syntax to TypeScript by using the `import` statement instead

Exploring the functionalities of R.pick in TypeScript

TypeScript conditional return type: effective for single condition but not for multiple conditions

Reducing SCSS import path in Angular 7

Guide on loading HTML templates into tab content within an Angular application

Typescript: Deciphering how to interpret a string with a mix of characters and numbers

The HTML canvas drawImage method overlays images when the source is modified

Running cy.task after all test suites can be done by adding the task in a

The latest version of npm Boostrap (4.1.0) is missing some important CSS properties for the `background` tag