2

I'm working on the report page which have to process a big JSON Object. This JSON object may contain at least 500 to 600 inner JSON objects. I have to iterate them all and have to display them in my report page.

During JSON iteration, I am getting in the browser:

RangeError: Maximum call stack size exceeded

Any idea's how to handle this big JSON object in client side? Any do's and don'ts for me?

Currently I'm splitting my big JSON object into smaller JSON objects not sure whether this approach yield desired result

Updated:

In the recursive nested method below, I'm getting the error. Before sending any values I have reduced the size of the JSON. value1 is my reduced JSON Object(any how it will have at least 100 JSON objects).

function nested(value1) {
    var final1 = {};

    var Keys1 = Object.keys(value1);
    if (angular.equals(Keys1, $scope.Headers)) {
        return final1;
    } else {
        angular.forEach(value1, function(value, key) {
            final1[key] = {};  // Getting the error in this line
            final1[key] = nested(value);
        });
    }

    return final1;
}

Edited: I have taken skeleton of the JSON object. In below JSON object each levels can have 50 JSON Objects and levels can be extended upto 10.

"First": {
    "second-1": {
        "level3": {
            "data1": {
                "Key1": "val1",
            },
            "data2": {
                "Key2": "",
            },
            "dat3": {
                "Key3": "",
            }
        },
        "second-2": {
            "Level3": {
                "Level4": {
                    "data1": {
                        "Key1": ""
                    },
                    "data2": {
                        "Key1": ""
                    }
                },
            }
        }
    }
}
PrabaharanKathiresan
  • 1,099
  • 2
  • 17
  • 32
  • You have an infinite loop, where is impossible to answer as there's no code posted. – adeneo Feb 01 '16 at 13:42
  • This sounds like you are calling thinks like `$apply` a way too often. – Thomas Kekeisen Feb 01 '16 at 13:43
  • Also see: http://stackoverflow.com/questions/30907117/rangeerror-maximum-call-stack-size-exceeded-angularjs and http://stackoverflow.com/questions/25028597/how-can-i-fix-maximum-call-stack-size-exceeded-angularjs and http://stackoverflow.com/questions/21617800/angular-copy-returning-rangeerror-maximum-call-stack-size-exceeded-how-to-reso – TylerH Feb 01 '16 at 15:24
  • Hi TylerH, Thanks for your suggestions, but for me I would like to know handling complext JSON. – PrabaharanKathiresan Feb 01 '16 at 15:29

1 Answers1

0

I am guessing the issue has nothing to do with the size or complexity of the JSON, and this issue is due to a poorly structured recursive function.

First, is recursion really necessary here? How deeply nested is your JSON? If its only a few levels deep, I would recommend using simple conditional logic to pull out your values if the children exist instead of recursion.

Second, if you stick with recursion, I would not recommend using a $scope variable in your function. I would refactor that into a method parameter that you pass in so you know exactly what it is at the time each function is executed.

Third (and likely the cause of your infinite loop), your recursive function does not have a clear terminating state. Your function keeps digging into the keys of the object recursivley until this condition is true.

angular.equals(Keys1, $scope.Headers)

Object.keys() returns an array of strings, so $scope.Headers must match this array exactly for this statement to return true. That means $scope.Headers must be an array, with the exact same number of strings and in the same order. It seems unlikely that all children nodes would have this characteristic to terminate appropriately.

If you want to post a sample of the json you are trying to parse and how you hope to access its data we might be able to help you craft a better parsing solution.

Anthony Patton
  • 595
  • 3
  • 10