How to Pass Nested Object to Spring MVC Controller

Nested Object

The POJO (a plain Java object)

@Data
public class User {
    private Integer id;
    private String name;
    private Address address;

    @Data
    public static class Address {
        private String province;
        private String city;
        private String area;
    }
}

Receive from Request URL Query String

Frontend

id=xxx&name=xxx&address.province=xxx&address.city=xxx&address.area=xxx

Code example

let json = {
    id: 1, 
    name: "Tom", 
    address: {
        province: "A1",
        city: "A1-1",
        area: "A1-2-2"
    }
}

function serializeTwoLevelsNestedJson(json) {
    return Object.keys(json).map(function(key) {
        if (typeof json[key] === "object" && !Array.isArray(json[key])) {
            return Object.keys(json[key]).map(function(subJsonKey) {
                return encodeURIComponent(key) +'.' + encodeURIComponent(subJsonKey)+ '=' + encodeURIComponent(json[key][subJsonKey]);
            }).join('&');
        } else {
            return encodeURIComponent(key) +'=' + encodeURIComponent(json[key])
        }
    }).join('&');
}

Backend

@RequestMapping("/test")
public String test(User user) {
}

Receive from Form Data

Frontend

• id
• name
• address.province
• address.city
• address.area

Backend

@RequestMapping("/test")
public String test(User user) {
}

Receive from Request Body JSON

Frontend

{
    "id": 1,
    "name": "Jack",
    "address": {
        "province": "AAA",
        "city": "BBB"
    }
}

Backend

@RequestMapping("/test")
public String test(@RequestBody User user) {
}

Nested Object List

The POJO (a plain Java object)

@Data
public class User {
    private Integer id;
    private String name;
    private List<Address> addressList;

    @Data
    public static class Address {
        private String province;
        private String city;
        private String area;
    }
}

Receive from Request URL Query String

Frontend

This type of query strings looks like id=xxx&name=xxx&addressList[0].province&addressList[0].city&addressList[0].area, but it actually is

id=1&name=ABC&addressList%5B0%5D.province=AA&addressList%5B0%5D.city=BB&addressList%5B0%5D.area=CC

You need to Encode square brackets [ and ] by the encodeURIComponent(str) method.

Code example

let json = {id: 1, name: "Tom", addressList: [
    {
        province: "A1",
        city: "A1-1",
        area: "A1-2-2"
    },
    {
        province: "B1",
        city: "B1-1",
        area: "B1-2-2"
    }
]};

function serializeTwoLevelsNestedJson(json) {
    return Object.keys(json).map(function(key) {
        if (typeof json[key] === "object") {
            if (Array.isArray(json[key])) {
                return json[key].map((arrayItem, index) => {
                    return Object.keys(arrayItem).map(function(arrayItemKey) {
                        return encodeURIComponent(key) +encodeURIComponent('[') + index + encodeURIComponent('].') + encodeURIComponent(arrayItemKey) + '=' + encodeURIComponent(arrayItem[arrayItemKey]);
                    }).join('&')
                }).join('&');
            } else {
                return Object.keys(json[key]).map(function(subJsonKey) {
                    return encodeURIComponent(key) +'.' + encodeURIComponent(subJsonKey)+ '=' + encodeURIComponent(json[key][subJsonKey]);
                }).join('&');
            }
        }
        else {
            return encodeURIComponent(key) +'=' + encodeURIComponent(json[key])
        }
    }).join('&');
}

Backend

@RequestMapping("/test")
public String test(User user) {
}

Receive from Form Data

Frontend

• id
• name
• addressList[0].province
• addressList[0].city
• addressList[0].area
• addressList[1].province
• …

Backend

@RequestMapping("/test")
public String test(User user) {
}

Receive from Request Body JSON

Frontend

{
    "id": 1,
    "name": "Jack",
    "addressList": [
        {
            "province": "AAA",
            "city": "BBB",
            "area": "CCC"
        },
        ...
    ]
}

Backend

@RequestMapping("/test")
public String test(@RequestBody User user) {
}