causing exception while sending json from angularjs to spring controller in spring boot application

Question

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.

abaghel · Accepted Answer · 2016-08-30 03:53:03Z

1

Your json request for REST service should look like below. Please test your service in soapui or Postman and verify the request generated by your jsp/html page.

{
"billDtos" : [
 {
   "description": "sfd",
   "quantity": 3,
   "amount": 2
 },
 {
   "description": "sdf",
   "quantity": 4,
   "amount": 2
  }
 ]
}

edited Aug 30, 2016 at 3:53

answered Aug 30, 2016 at 3:46

abaghel

15.4k2 gold badges56 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Santosh Karna Over a year ago

Thanks for the response.The json you have provided is working fine in postman but the json I have mentioned in question is not working.I am beginner in angularjs.So can you please instruct me, in angularjs, how to convert my json to the json you have mentioned

abaghel Over a year ago

Check this out. stackoverflow.com/questions/30989391/…

Santosh Karna Over a year ago

Thanks problem solved. I converted my json format into the json format you have mentioned

Collectives™ on Stack Overflow

causing exception while sending json from angularjs to spring controller in spring boot application

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related