What causes the "Uncaught RangeError: Maximum call stack size exceeded" and how to remove it?

Question

I'm creating a crossfilter dimension using data from ajax. what is the right way of creating the dimension variable?

    var url = "http://" + window.location.host + "/twitter-data"; 

    $.ajax({
        url: url,
        async: false,
        success: function(data) {
                makeGraphs(data);
        }

    });

    function makeGraphs(records){
        var dateFormat = d3.time.format("%Y-%m-%dT%H:%M:%S+%H:%M");

        var data = records.map(obj => {

            var res = dateFormat.parse(obj._source.published)
            return res;
        });

        console.log(data[0]);

        //Crossfilter
        var ndx = crossfilter(data);
        var all = ndx.groupAll


        //Dimensions
        var hashtagDim = ndx.dimension( function (d) {return d.hashtags; }, true);

'

The error on the console looks like:

Uncaught RangeError: Maximum call stack size exceeded

at quicksort (crossfilter.js:172)

at sort (crossfilter.js:169)

and it continues like this.

The last line on the code snippet produces the error. I have seen solutions that say it is a recursive function call but i am not sure what I need to change on my code to avoid this error.

Answer 1

Are you certain there is a ´hashtag´ property on your data elements?

Commonly, when I have run into the same error using crossfilter, it has been because I have been attempting to register a dimension using a non-existing property (i.e. the value function returns undefined). Using a wrong case for a property will also result in an undefined return value, as properties are case sensitive.

Generally, a dimension (or group) value function may never return NaN, undefined, or null: Natural ordering of dimension and group values.

A possible underlying cause is if you are initiating your crossfilter before your AJAX request is complete. But this is just guesswork, as I do not know enough about your code.