Question

I have this code snippet, which works great somewhere else, but gives me a circular reference error when I move it to a different section. I can’t even find a good reference on what a circular reference is anywhere.

// Create a new array to hold each of the Properties from the custom search pane
// This array will eventually be converted to JSON and become a List<Property>
propertyTables = [];

// Create new Object to hold a row - we have to construct these 
// Property objects manually for each row
propertyRow = {};

// This needs to be rewritten to include all of hidden input elements from the custom object that is clicked
// For each of the data elements the properties table, add it to the Object
$(this).parent().find('.editablePropertyList .customPropertyPrompt, .editablePropertyList .customPropertyDataType, .editablePropertyList .customPropertyInquirySearchType, .editablePropertyList .customPropertyID, .editablePropertyList .customPropertyText').each(function(index) {
    propertyValue = $(this).val();
    propertyText = $(this).text();
    switch ($(this).attr("class")) {
        case "customPropertyID":
            propertyRow.propertyID = propertyValue;
            break;
        case "customPropertyDataType":
            propertyRow.dataType = propertyValue;
            break;
        case "customPropertyPrompt":
            propertyRow.prompt = propertyText;
            break;
        case "customPropertyInquirySearchType":
            propertyRow.inquirySearchType = propertyValue;
            break;
        case "customPropertyText":
            // Whenever it reaches this data element, this means
            // that the iteration is at the end of a row.  Push the
            // newly filled propertyRow object (typeof Property) on
            // the PropertyTable array.  Then reinstance the propertyRow
            // object and it will start populating with the next row
            // as the next iteration occurs with propertyID
            propertyRow.inquirySearchText = propertyValue;
            if (propertyRow.inquirySearchText !== "") {
                propertyTables.push(propertyRow);
            }
                propertyRow = {};
                break;
            }
    });


    var statusFilter = [];
    var limitAnnotation = [];


    searchCriteria = {}; // Created the object
    searchCriteria.topFolderListBox = topFoldersWithSomeSelected; // Add the List<topLevelFolders> as the first property
    searchCriteria.docTypesListBox = docTypesWithSomeSelected; // Add the List<DocumentType> as the second property
    searchCriteria.propertyTable = propertyTables; // Add the List<Property> as the third property
    searchCriteria.statusFilter = statusFilter; // Add the List<statusFilter> as the fourth property
    searchCriteria.limitAnnotation = limitAnnotation; // Add the List<limitAnnotation> as the fifth property
    searchCriteria.fromDate = ""; // Add the string fromDate as the sixth property
    searchCriteria.toDate = ""; // Add the string toDate as the seventh property
    searchCriteria.dateRangeRelativeToday = false;
    searchCriteria.annotationText = ""; // Add the string annotationText as the eigth and final property

    // Convert to JSON String - craps out here with circular reference error
    textToSend = JSON.stringify(searchCriteria, null, "");

Answer 1

Circular Reference

In short: It is when objA contains a reference to objB which in turn contains a reference to objA.. and so on. You will have an infinite series like that.

A simplest example:

var a = {}
var b = {}
a['x'] = b;
b['y'] = a;

In the above case, a object contains a key x which refers to b. And in the similar fashion, b object contains a key y which refers to a back again.

This is a classic problem while serialising (like JSON in this case):

serialise a ->
    serialise value of key x in a ->  # == b
        serialise b ->
            serialise value of key y in b -> # ==a
                serialise a ->
                    ... and so on..

The error that I get (in Chrome) when trying the above code:

TypeError: Converting circular structure to JSON

---

About your problem, it is really difficult to tell where exactly is the circular reference without looking at the entire code. I would suggest one thing. Do a console.log(searchCriteria). If your browser shows a tree like structure go on expanding the nodes until you hit a node which you have seen before (at lesser depth).

And when you see something like the below, you know what is the culprit. 🙂