CODEWITHSUNDEEP
javascripthtml
Matt
Matt

Reputation: 13

Getting a Maximum call stack size exceeded error and not exactly sure why

Note this is for a class assignment I am using jQuery to perform an ajax call on an API. The code works and spits out my desired information, however if I leave it hanging in the browser after a while I get this error jquery.js:8459 Uncaught RangeError: Maximum call stack size exceeded. I am thinking I might have an infinite loop or something in there but haven't been able to pinpoint it. Included is my script js, as well as the relevant index.html. I think the error is specifically in the getDoughnuts ajax call but I am not postive on this. Thanks for any help.

Javascript File

$(document).ready(function() {
  $("form#new-doughnut").on('submit', postDoughnut);
  getDoughnuts();
});

function getDoughnuts() {

$.ajax({
        url: 'http://api.doughnuts.ga/doughnuts',
        method: 'GET',
        dataType: 'json'
    })
    .done(function(data, textStatus) {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            addDoughnut(data[i]);
        }
    })
    .fail(function(data, textStatus) {
        console.log("ERROR getting doughtnuts. status: " + textStatus);
    });
}


function postDoughnut(event) {
  event.preventDefault();

  var doughnut = {
    style: $('form#new-doughnut select#doughnut-style').val(),
    flavor: $('form#new-doughnut select#doughnut-flavor').val()
};

$.ajax({
        url: 'http:api.doughnuts.ga/doughnuts',
        method: 'post',
        dataType: 'json',
        data: event
    })
    .done(function(data, textStatus) {
        addDoughnut(data);
    })
    .fail(function(data, textStatus) {
        console.log("ERROR getting doughnuts. status: " + textStatus);
    });
$('form#new-doughnut input#doughnut-flavor').val(null)
}



function addDoughnut(doughnut) {
  $("ul#doughnuts").prepend("<li>" + doughnut.flavor + " - <em>" +    doughnut.style + "</em></li>")
}

HTML file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>The Doughnut Shop</title>
        <link rel="stylesheet" href="css/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <h1>Doughnut Shop</h1>
  <form id="new-doughnut">
    <input type="text" name='doughnut[flavor]' id="doughnut-flavor" placeholder="What type of doughnut?" value="Chocolate">
    <select name="doughnut[style]" id="doughnut-style">
        <option value="Old Fashioned">Old Fashioned</option>
        <option value="Cake">Cake</option>
        <option value="French Cruller">French Cruller</option>
        <option value="Yeast">Yeast</option>
    </select>
    <input type="submit" value='Save My Doughnut'>
  </form>
</body>
<ul id="doughnuts">
</ul>

<script src="js/script.js"></script>

Upvotes: 1

Views: 2538

Answers (1)

Tamas Hegedus
Tamas Hegedus

Reputation: 29906

The problem is because you gave the event object as data to jQuery.ajax, which is a circular structure, and jQuery fails to process circular data objects. Try chainging the following line:

    data: event

to:

    data: doughnut

EDIT: also the following url is malformed:

    url: 'http:api.doughnuts.ga/doughnuts',

Upvotes: 3

Related Questions