The request sent by the client was syntactically i

Question

Below is the ajax call to my controller

$('#submitButton').on('click', function() {
            var expenseDetailsListVO = {};
            expenseDetailsListVO = getData();
            console.log(expenseDetailsListVO);
            var data = JSON.stringify(expenseDetailsListVO);
            console.log(data);
            $.ajax({
                url : "${pageContext.request.contextPath}/saveExpenses",
                data : data,
                method : 'POST',
                contentType : "application/json",
                success : function(data) {

                },
                error : function(data) {

                }
            });
        });

This is my controller

@RequestMapping (value = "/saveExpenses", method=RequestMethod.POST)
    public String saveExpenses (@RequestBody(required=false) ExpenseDetailsListVO expenseDetailsListVO, Model model) {


        //System.out.println("User Id is........ "+userId);
        System.out.println(expenseDetailsListVO);
        ExpenseDetailsList expenseDetailsList = MapperUtil.convertExpenseListVOToDO(expenseDetailsListVO);

        //expenseServiceManagement.addExpense(expenseDetailsList);

        return "addExpense";
    }

And below are my java classes

public class ExpenseDetailsListVO {


    private List<ExpenseDetailsVO> expenseDetailsVOs = LazyList.decorate(
            new ArrayList<ExpenseDetailsVO>(),
            FactoryUtils.instantiateFactory(ExpenseDetailsVO.class));

public ExpenseDetailsListVO (){}

    public List<ExpenseDetailsVO> getExpenseDetailsVOs() {
        return expenseDetailsVOs;
    }

    public void setExpenseDetailsVOs(List<ExpenseDetailsVO> expenseDetailsVOs) {
        this.expenseDetailsVOs = expenseDetailsVOs;
    }

    @Override
    public String toString() {
        return "ExpenseDetailsListVO [expenseDetailsVOs=" + expenseDetailsVOs
                + "]";
    }

}



   public class ExpenseDetailsVO {

        /*private int expenseId;*/

        private String itemDescription;

        private double amount;

        private Date expenseDate;

public ExpenseDetailsVO (){}
        /*public int getExpenseId() {
            return expenseId;
        }

        public void setExpenseId(int expenseId) {
            this.expenseId = expenseId;
        }*/

        public String getItemDescription() {
            return itemDescription;
        }

        public void setItemDescription(String itemDescription) {
            this.itemDescription = itemDescription;
        }

        public double getAmount() {
            return amount;
        }

        public void setAmount(double amount) {
            this.amount = amount;
        }

        public Date getExpenseDate() {
            return expenseDate;
        }

        public void setExpenseDate(Date expenseDate) {
            this.expenseDate = expenseDate;
        }

        @Override
        public String toString() {
            return "ExpenseDetailsVO [itemDescription=" + itemDescription
                    + ", amount=" + amount + ", expenseDate=" + expenseDate + "]";
        }

    }

Previously it was working but something I changed which I can't recall and now am getting error in browser console as the request sent by the client was syntactically incorrect

Guys please let me know what is the issue...

Answer 1

There was a very small mistake because of which it was showing that error... So I just needed to do small change, below is the jquery

$('#submitButton').on('click', function() {
            var expenseDetailsListVO = {};
            expenseDetailsListVO = getData();
            console.log(expenseDetailsListVO);
            var data = JSON.stringify(expenseDetailsListVO);
            console.log(data);
            $.ajax({
                url : "${pageContext.request.contextPath}/saveExpenses",
                data : data,
                method : 'POST',
                contentType : "application/json",
                success : function(data) {

                },
                error : function(data) {

                }
            });
        });

My controller was expecting an object which will be having array of object but from client side it was sending arrays, so that array needed to be wrapped inside an object which I did and its working :)