title: Send complex object to a web api controller with ajax
body: <p>I need to pass a complex object called vm that has one object 'Budget' and one array 'BudgetDetails' that is populated with the rows of an html table, and when i try to send this complex object to my api controller with ajax i have this error message in the console "Uncaught RangeError: Maximum call stack size exceeded".</p>
  
  <p>This is my jQuery code: </p>
  
  <pre><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");
                  }
              });
          });
  });
  </code></pre>
  
  <p>If I put as a comment the part where you insert each row of the html table in an array does not show me any errors in the console, and sends without problem the object 'Budget' to the API. The error appears when I try to send the 'BudgetDetails' array with the 'Budget' object.</p>
  
  <p>This is my API Controller: </p>
  
  <pre><code>[HttpPost]
  public IHttpActionResult CreateBudget(NewBudgetDto newBudgetDto)
  {           
      return Ok();
  }
  </code></pre>
  
  <p>This is my NewBudgetDto class:</p>
  
  <pre><code>public class NewBudgetDto
  {
      public BudgetDto Budget { get; set; }
      public List&lt;BudgetDetailDto&gt; BudgetDetails { get; set; }
  }
  </code></pre>
  
  <p>This is my BudgetDto class: </p>
  
  <pre><code> 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; }
  }
  </code></pre>
  
  <p>This is my BudgetDetailDto class:</p>
  
  <pre><code>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; }
  }
  </code></pre>
  
  <p>I really don't know what the problem could be. </p>