Why does $().map Produces Circular Reference

Question

Chrome's array.map works fine, but jQuery's .map produces a circular reference somehow. I can't see any evidence of a circular reference using console.log, but JSON.stringify throws Uncaught TypeError: Converting circular structure to JSON in the second block.

Run it on JSFiddle: http://jsfiddle.net/langdonx/vQBak/

Or check the code:

var callback = function(index, element) {
    return {
        "index": index
    };
};

var array1 = ["1", "2"];
var mappedArray1 = array1.map(callback);
console.log(mappedArray1);
var json1 = JSON.stringify(mappedArray1);
console.log(json1);

var jqueryArray2 = $('body > div');
var mappedArray2 = jqueryArray2.map(callback);
console.log(mappedArray2);
var json2 = JSON.stringify(mappedArray2); // Chokes with "Uncaught TypeError: Converting circular structure to JSON"
console.log(json2);​

Yes, I'm using the same callback, and yes ECMAScript's map passes the arguments in a different order, but it shouldn't matter for this example, as they're all simple types (string, number).

Answer 1

The jQuery .map() function returns a jQuery object containing an array, not an actual array, which may be an important difference. Try calling:

var json2 = JSON.stringify(mappedArray2.get());

The call to .get() will return the actual array rather than a jQuery object.