I have a tableDnD drag and drop with JSON.stringify :
jQuery(document).ready(function() { jQuery("#Table").tableDnD({ onDragClass: "danger", onDrop: function(table, row) { jQuery.ajax({ url: "ajax.php", type: "post", data: { 'rows' : JSON.stringify(table.tBodies[0].rows) }, dataType: 'html', success: function(reponse) { if(reponse) { //alert('Success'); } else { alert('Erreur'); } } }); } }); });
I have this error message:
Uncaught TypeError: Converting circular structure to JSON
I have the problem only on Chrome.
The "Converting circular structure to JSON" error occurs when we pass an object that contains circular references to the JSON. stringify() method. To solve the error, make sure to remove any circular references before converting the object to JSON.
A circular structure is an object that references itself. To be able to stringify such objects, developers can utilize the replacer parameter in the stringify() method, making sure the function that is being passed in, filters out repeated or circular data.
stringify() is fine. Using the output of JSON. stringify() in a JavaScript context will result in the expected behavior.
JSON.stringify() The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
You should not convert a DOM element to JSON directly.
While - like you already experienced - it fails e.g. in Chrome, the results may also be unexpected.
The reason for this is because the data is circular:
A Node has the property childNode
containing all its children and the property parentNode
pointing to the parent.
The JSON format does not support references, so it will need to follow the properties until an end is reached, but because a child points to its parent which has a list of its children, this is an endless loop, that’s the reason why you get the error:
Uncaught TypeError: Converting circular structure to JSON
Even if this is resolved by the browser you may have other problems. Because not only childNodes
exist but also childElements
. The same is for parentNode
/parentElement
, then you also have nextSibling
, prevSibling
, firstChild
, lastChild
, ... that would probably also be followed, so you would end up in the terrifying large JSON file containing a butch of duplicate data.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With