Contents
  1. 1. Nested Object
    1. 1.1. Receive from Request URL Query String
    2. 1.2. Receive from Form Data
    3. 1.3. Receive from Request Body JSON
  2. 2. Nested Object List
    1. 2.1. Receive from Request URL Query String
    2. 2.2. Receive from Form Data
    3. 2.3. Receive from Request Body JSON

Nested Object

The POJO (a plain Java object)

1
2
3
4
5
6
7
8
9
10
11
12
13
@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

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

Code example

1
2
3
4
5
6
7
8
9
let json = {
id: 1,
name: "Tom",
address: {
province: "A1",
city: "A1-1",
area: "A1-2-2"
}
}
1
2
3
4
5
6
7
8
9
10
11
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

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

Receive from Form Data

Frontend

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

Backend

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

Receive from Request Body JSON

Frontend

1
2
3
4
5
6
7
8
{
"id": 1,
"name": "Jack",
"address": {
"province": "AAA",
"city": "BBB"
}
}

Backend

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

Nested Object List

The POJO (a plain Java object)

1
2
3
4
5
6
7
8
9
10
11
12
13
@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

1
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

1
2
3
4
5
6
7
8
9
10
11
12
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"
}
]};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
@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

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

Receive from Request Body JSON

Frontend

1
2
3
4
5
6
7
8
9
10
11
12
{
"id": 1,
"name": "Jack",
"addressList": [
{
"province": "AAA",
"city": "BBB",
"area": "CCC"
},
...
]
}

Backend

1
2
3
@RequestMapping("/test")
public String test(@RequestBody User user) {
}
Contents
  1. 1. Nested Object
    1. 1.1. Receive from Request URL Query String
    2. 1.2. Receive from Form Data
    3. 1.3. Receive from Request Body JSON
  2. 2. Nested Object List
    1. 2.1. Receive from Request URL Query String
    2. 2.2. Receive from Form Data
    3. 2.3. Receive from Request Body JSON