I am trying to generate dynamic table row using angularjs and it works fine but the problem is while sending json to server i.e. spring boot controller, it is causing the exception like this:
nested exception is com.fasterxml.jackson.databind.JsonMappingException: Can not deserialize instance of com.practice.dto.BillsDto out of START_ARRAY token
json is like this:
[
{
"description": "sfd",
"quantity": 3,
"amount": 2
},
{
"description": "sdf",
"quantity": 4,
"amount": 2
}
]
dto is
public class BillsDto {
private List<BillDto> billDtos;
public BillsDto() {
}
// getters setters
}
another dto is:
public class BillDto {
private int id;
private String description;
private double quantity;
private double amount;
public BillDto() {
}
// getters setters
}
spring controller method is:
@RequestMapping(value = "/savePatientBill", method = RequestMethod.POST)
public ModelAndView saveBill(@RequestBody BillsDto billings){
System.out.println(billings.getBillDtos().size());
for(BillDto billDto: billings.getBillDtos()){
System.out.println(billDto.getDescription());
System.out.println(billDto.getAmount());
System.out.println(billDto.getQuantity());
}
}
angularjs code is:
app.controller('newBillCtrl', function ($scope, $http, $httpParamSerializer, PatientConstants) {
$scope.billings = [{}];
$scope.addNew = function (billings) {
$scope.billings.push({
'description': "",
'quantity': "",
'amount': "",
});
};
$scope.remove = function () {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.billings, function (selected) {
if (!selected.selected) {
newDataList.push(selected);
}
});
$scope.billings = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.billings, function (billings) {
billings.selected = $scope.selectedAll;
});
};
$scope.submit = function () {
$scope.bill=angular.toJson($scope.billings);
console.log($scope.bill)
$http.post(PatientConstants.DOMAIN_URL + '/savePatientBill', $scope.bill);
}
});
and my html template is:
<script type="text/ng-template" id="newBill.jsp">
<div class="container-fluid">
<div class="row">
<div style="margin-bottom: 50px;">
<h2 align="center">Patient New Bill</h2>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="submit()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Description</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="billing in billings">
<td>
<input type="checkbox" ng-model="billing.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="billing.description" required/></td>
<td>
<input type="number" class="form-control" ng-model="billing.quantity" required/></td>
<td>
<input type="number" class="form-control" ng-model="billing.amount" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!billings.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="button" ng-click="addNew()" class="btn btn-primary addnew pull-right" value="Add New">
<input type="submit" class="btn btn-primary addnew pull-right" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
please help me.Thanks in advace.