"Uncaught RangeError: Maximum call stack size exceeded" when calling $.ajax jquery function

Question

Following code block intends to collect data from the Datatable called materialsInMaterialsRecieved and a form called materials-recieved and create an object as below sample.

{
    PurchaseOrderId: "1",
    ReceivedDate: "07/23/2016",
    MaterialsInMaterialsRecived: {
        Cost: "2",
        MaterialId: "1",
        MaterialName: "Silk",
        QuantityDispatched: "2",
        QuantityRecieved: "2",
        Remark: "asda"
    }
}

This object is being created and stored as submitData. submitData needs to be sent over ajax to an API url. But when doing so, an error is thrown which says Uncaught RangeError: Maximum call stack size exceeded.

Following is the html markup,

<div class="col-md-6 col-sm-12">
    <form action="/api/MaterialsRecieveds/AddMaterialsRecieved" id="materials-recieved" method="POST">
        <div id="name-group" class="form-group">

            <label for="name">Purchase OrderID</label>
            <select name="PurchaseOrderId" class="form-control" id="PurchaseOrderList"></select>

            <label for="date">P/O sent time</label>
            <input type="text" class="form-control" name="ReceivedDate" id="receivedDate">
        </div>
    </form>
        <button class="btn btn-success" id="create-materials-recieved-note">Create Materials Recieved Note</button>
</div>
<div class="col-md-12">
    <table id="materials-in-materials-recieved" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Material Id</th>
                <th>Material Name</th>
                <th>Quantity Recieved</th>
                <th>Quantity Dispatched</th>
                <th>Cost</th>
                <th>Remarks</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Following is the javacript code,

    $("#create-materials-recieved-note").on('click',function (event) {
        var submitData = {};
        var materials = materialsInMaterialsRecieved.rows().data(); // materialsInMaterialsRecieved is a handle for a Datatable

        $("#materials-recieved .form-control").each(function () {
            submitData[$(this).attr2("name")] = $(this).val();

        })

        submitData["MaterialsInMaterialsRecived"] = materials;
        console.log(submitData);

        $.ajax({
            type: 'post', // define the type of http verb we want to use (post for our form)
            url: '/api/MaterialsRecieveds/AddMaterialsRecieved', // the url where we want to post
            data: submitData, // our data object
            dataType: 'json', // what type of data do we expect back from the server
            contentType: 'application/json',      
            success: function (data) {
                console.log(data);
            }
        });
        event.preventDefault();
    });

If I comment-out the $.ajax(... statement then the error doesn't appear.

Answer 1

submitData is a huge array-like-object. If I pass submitData directly into the $.ajax JQuery tries to serialize payload data into a json, because I have given dataType as 'json'. This JQuery serialization creates lots of method callbacks and freezes the browser, then throws the error notifying it.

The simple solution to this problem was avoiding JQuery serialization and passing a stringified version of the payload data to the ajax call.

$.ajax({
    type: 'post', 
    url: '/api/MaterialsRecieveds/AddMaterialsRecieved', 
    data: JSON.stringify(submitData), // stringyfy before passing
    dataType: 'json', // payload is json
    contentType : 'application/json',
    success: function (data) {
        console.log(data);
        }
    });