Yeah so I don't think using form encoded data is going to work. The reason is that it is mainly for key value pairs, in the form
key1=value7&key2=value2&key3=value3...
What you are doing is using only two keys, listA and listB. So imagine what the values would need to look like, to send the entire list. It isn't pretty. For complex data, it is more viable to send the data in a format like JSON. The problem with this for your particular use case is that there are two unrelated objects (or arrays) to needs to send. For this, a solution would be to use multipart. You're in luck, because I just posted a late answer yesterday, on exactly how this can be handled with Angular.
I won't go through an explanation here about the code. Everything is explained in that link. Please read through it, as you go through this answer. I will be using Jersey as may JAX-RS implementation (as does the example in the link - but it also offers other alternative implementations)
Resource
import java.util.List;
import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import org.glassfish.jersey.media.multipart.FormDataParam;
@Path("/form")
public class FormResource {
@POST
@Consumes("multipart/form-data")
@Produces("text/plain")
public String addIssuancesForFP(@FormDataParam("listA") List<TypeA> list1,
@FormDataParam("listB") List<TypeB> list2) {
StringBuilder response = new StringBuilder();
for(TypeA a: list1) {
response.append(a.toString()).append("; ");
}
for (TypeB b: list2) {
response.append(b.toString()).append("; ");
}
System.out.println("Service is called correctly");
return response.toString();
}
}
Angular
<!DOCTYPE html>
<html ng-app="formApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/angular.js/angular.js"></script>
<script>
angular.module("formApp", [])
.controller("defaultCtrl", function($scope, $http) {
$scope.sendData = function() {
var myList1 = [];
var obj = {};
obj["val1"] = "value1";
obj["val2"] = "value2";
myList1.push(obj);
var myList2 = [];
var obj = {};
obj["val11"] = "value11";
obj["val12"] = "value12";
myList2.push(obj);
var obj = {};
obj["val11"] = "value211";
obj["val12"] = "value212";
myList2.push(obj);
var list1 = JSON.stringify(myList1);
var list2 = JSON.stringify(myList2);
var boundary = Math.random().toString().substr(2);
var header = "multipart/form-data; charset=utf-8; boundary=" + boundary;
$http({
url: "/api/form",
headers: {"Content-Type": header},
data: createRequest(list1, list2, boundary),
method: "POST"
}).then(function(response) {
$scope.result = response.data;
});
function createRequest(list1, list2, boundary) {
var multipart = "";
multipart += "--" + boundary
+ "\r\nContent-Disposition: form-data; name=listA"
+ "\r\nContent-type: application/json"
+ "\r\n\r\n" + list1 + "\r\n";
multipart += "--" + boundary
+ "\r\nContent-Disposition: form-data; name=listB"
+ "\r\nContent-type: application/json"
+ "\r\n\r\n" + list2 + "\r\n";
multipart += "--" + boundary + "--\r\n";
return multipart;
}
};
});
</script>
</head>
<body>
<div ng-controller="defaultCtrl">
<button ng-click="sendData()">Send</button>
<p>{{result}}
</div>
</body>
</html>
Result
TypeA{val1=value1, val2=value2};
TypeB{val1=value11, val2=value12};
TypeB{val1=value211, val2=value212};
Which is expected, as I just built a string from the toString() methods, which I implemented in the TypeA and TypeB classes.
public class TypeA {
public String val1;
public String val2;
@Override
public String toString() {
return "TypeA{" + "val1=" + val1 + ", val2=" + val2 + '}';
}
}
public class TypeB {
public String val11;
public String val12;
@Override
public String toString() {
return "TypeB{" + "val1=" + val11 + ", val2=" + val12 + '}';
}
}
Hope this helps.
