Question

I am sending post data via ajax, and that data looks like this:

var cardProperties = {
    container: $("#cardContainer"),
    elementsWrapper: $("#cardElementsWrapperBorder"),
    size: 0, //0 -> (90x50mm <-> 510px x 283px), 1-> (85x55mm <-> 482px x 312px)
    position: "h", //default horizontal
    bgImagesPath: "media/images/designs/backgrounds/", //path to card bg images
    floatingImagesPath: "media/images/designs/floating-images/", //path to card bg images
    imagesPerPage: 8,
    innerBorderMargins: 40, //this should be divided by 2 to get the actual margin
    currentCardSide: 1
};

So basicly there is some usual data, but fields like container or elementWrapper is probably containing a lot of information about that object and also it’s child objects, so this is causing me very ugly error Uncaught RangeError: Maximum call stack size exceeded and since i don’t need those two fields how could i exclude it from the object without deleting any of that info, since i will need that stuff later in my js script.

EDIT

Also here is my ajax code:

$.post("server.php", {data: cardProperties},
   function(response){

   }
);

Answer 1

Remove functions and objects and you’ll just have those strings and numbers:

var propertiesForAjax = (function(obj){
        var out = {};
        for(var i in obj){
           if(typeof obj[i]==='object' || typeof obj[i]==='function') continue;
           out[i] = obj[i];
        }
    })(cardProperties);

Or without the self-executing function:

function transformProps(obj){
   var out = {};
   for(var i in obj){
       if(typeof obj[i]==='function' || typeof obj[i]==='object') continue;
       out[i] = obj[i];
   }
}

var toPost = transformProps(cardProperties);

Notes:

• if you’re transforming an object, you’d need to try something slightly different (check against a list of valid objects for example)
• if you don’t know what you’re transforming, you probably shouldn’t use this, as you could have unexpected output/lose things.