javascript - Send complex object to a web api controller with ajax -

i need pass complex object called vm has 1 object 'budget' , 1 array 'budgetdetails' populated rows of html table, , when try send complex object api controller ajax have error message in console "uncaught rangeerror: maximum call stack size exceeded".

this jquery code:

$(document).ready(function () {      var vm = {         budget: {},         budgetdetails: []     }      $("#submit").click(function () {             vm.budget = {                 dateissue: $("#dateissue").val(),                 budgetaccepted: $("#budgetaccepted").val(),                 vehicleid: $("#vehicleid").val()             };              $('#budgetdetail tr.detail').each(function (index, tr) {                                    var lines = $('td', tr).map(function (index, td) {                     return $(td).text();                 });                 vm.budgetdetails.push(lines);             });              $.ajax({                 url: "/api/budgets",                 method: "post",                 data: vm,                 success: function () {                     console.log("ok");                 }             });         }); }); 

if put comment part insert each row of html table in array not show me errors in console, , sends without problem object 'budget' api. error appears when try send 'budgetdetails' array 'budget' object.

this api controller:

[httppost] public ihttpactionresult createbudget(newbudgetdto newbudgetdto) {                return ok(); } 

this newbudgetdto class:

public class newbudgetdto {     public budgetdto budget { get; set; }     public list<budgetdetaildto> budgetdetails { get; set; } } 

this budgetdto class:

 public class budgetdto {     public int id { get; set; }     public datetime dateissue { get; set; }     public vehicledto vehicle{ get; set; }     public int vehicleid { get; set; }     public bool budgetaccepted { get; set; } } 

this budgetdetaildto class:

public class budgetdetaildto {     public int id { get; set; }     public int budgetid { get; set; }     public int productid { get; set; }     public byte quantity { get; set; }     public int price { get; set; }     public int discount { get; set; }     public int total { get; set; } } 

i don't know problem be.

when ever if want send complex need use stringfy. here demo , hope work @ side.

            var budgetdetailarr = [];             var budgetobj = {                 dateissue: $("#dateissue").val(),                 budgetaccepted: $("#budgetaccepted").val(),                 vehicleid: $("#vehicleid").val()             }              $('#budgetdetail tr.detail').each(function (index, tr) {                 var lines = $('td', tr).map(function (index, td) {                     return $(td).text();                 });                 budgetdetailarr.push(lines);             });              //console here see value of budgetdetailarr | budgetobj             console.log(budgetdetailarr)             console.log(budgetobj)              var sendobj = {                 budget: budgetobj,   // same model property name                 budgetdetails: budgetdetailarr    // same model property name             }      //ajax code         $.ajax({                 type: 'post',                 async: false,                 url: '/api/budgets',                 contenttype: 'application/json; charset=utf-8',  //send type of data sever                 datatype: 'text', //retrun type of data server                 traditional: true,                 data: json.stringify(sendobj),                 success: function (response, statustext, xhr) {                  console.log(response)                  },                 error: function (xmlhttprequest, textstatus, errorthrown) {                                            alert(xmlhttprequest.responsetext);                  }             });