Nested JSON iterate, Maximum call stack size exceeded

Question

I have implemented a recursive function to iterate through a nested JSON. The issue I am facing is that it throws the error

Maximum call stack exceeded

The function that I implemented is as follows,

function createTreeMap (treeCatalog){
  var _this = this;

  _.each(treeCatalog, function (ele, inx){
    if(typeof (ele) === "object"){
      createTreeMap(ele);
    }else{
      //I create another JSON structure with the value as its property and its value as 1.
      _this.treeMap[ele] = 1;

    }
  });

}

and the JSON I am iterating through looks something like this,

[{
    "EmployeeID": 2,
    "FirstName": "Andrew",
    "LastName": "Fuller",
    "Country": "USA",
    "Title": "Vice President, Sales",
    "HireDate": "1992-08-14 00:00:00",
    "BirthDate": "1952-02-19 00:00:00",
    "City": "Tacoma",
    "Address": "908 W. Capital Way",
    children: [{
        "EmployeeID": 8,
        "FirstName": "Laura",
        "LastName": "Callahan",
        "Country": "USA",
        "Title": "Inside Sales Coordinator",
        "HireDate": "1994-03-05 00:00:00",
        "BirthDate": "1958-01-09 00:00:00",
        "City": "Seattle",
        "Address": "4726 - 11th Ave. N.E."
    }, {
        "EmployeeID": 1,
        "FirstName": "Nancy",
        "LastName": "Davolio",
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-05-01 00:00:00",
        "BirthDate": "1948-12-08 00:00:00",
        "City": "Seattle",
        "Address": "507 - 20th Ave. E.Apt. 2A"
    }, {
        "EmployeeID": 3,
        "FirstName": "Janet",
        "LastName": "Leverling",
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-04-01 00:00:00",
        "BirthDate": "1963-08-30 00:00:00",
        "City": "Kirkland",
        "Address": "722 Moss Bay Blvd."
    }, {
        "EmployeeID": 4,
        "FirstName": "Margaret",
        "LastName": "Peacock",
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1993-05-03 00:00:00",
        "BirthDate": "1937-09-19 00:00:00",
        "City": "Redmond",
        "Address": "4110 Old Redmond Rd."
    }, {
        "EmployeeID": 5,
        "FirstName": "Steven",
        "LastName": "Buchanan",
        "Country": "UK",
        "Title": "Sales Manager",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1955-03-04 00:00:00",
        "City": "London",
        "Address": "14 Garrett Hill",
        "expanded": "true",
        children: [{
            "EmployeeID": 6,
            "FirstName": "Michael",
            "LastName": "Suyama",
            "Country": "UK",
            "Title": "Sales Representative",
            "HireDate": "1993-10-17 00:00:00",
            "BirthDate": "1963-07-02 00:00:00",
            "City": "London",
            "Address": "Coventry House Miner Rd."
        }, {
            "EmployeeID": 7,
            "FirstName": "Robert",
            "LastName": "King",
            "Country": "UK",
            "Title": "Sales Representative",
            "HireDate": "1994-01-02 00:00:00",
            "BirthDate": "1960-05-29 00:00:00",
            "City": "London",
            "Address": "Edgeham Hollow Winchester Way"
        },{
            "EmployeeID": 9,
            "FirstName": "Anne",
            "LastName": "Dodsworth",
            "Country": "UK",
            "Title": "Sales Representative",
            "HireDate": "1994-11-15 00:00:00",
            "BirthDate": "1966-01-27 00:00:00",
            "City": "London",
            "Address": "7 Houndstooth Rd."
        }]
    }]
}];

My suspicion is the similar child property names. But is there a proper way of fixing this as the similar child names is a requirement.

Thank you very much :)

UPDATE

this example simulates the issue I am having : http://jsfiddle.net/qaoapays/1/

Can you post a **complete** example? What's happening in the else part? — Felix Kling, May 21 '15 at 11:43
i try it with `console.log(ele);` in _else_ part and all work without any errors, [jsfiddle](http://jsfiddle.net/1e301tz6/) — Grundy, May 21 '15 at 11:48
@FelixKling I will update the question. but the issue is the neverending loop it runs through. :) — Hasitha Shan, May 21 '15 at 11:50
@Grundy I tried but the console log prints the output on an infinite cycle — Hasitha Shan, May 21 '15 at 11:54
I also tried it, all works well. Maybe something with your logic in `else` statement, or your data has circular references. — Dmitry Masley, May 21 '15 at 12:01
@DmitryMasley yes I noticed that too..il try to be more specifc — Hasitha Shan, May 21 '15 at 12:10
@Hasitha, but in my fiddle not an infinite cycle, so something wrong with your object, or `else` branch — Grundy, May 21 '15 at 12:15
@Grundy i'm calling this like `createTreeMap(withThePArentJSON);` — Hasitha Shan, May 21 '15 at 12:22
@Grundy I have updated the question with a fiddle which has the issue — Hasitha Shan, May 21 '15 at 12:25
@DmitryMasley I have updated the question with a fiddle which has the issue — Hasitha Shan, May 21 '15 at 12:25
@FelixKling I have updated the question with a fiddle which has the issue — Hasitha Shan, May 21 '15 at 12:25
if you see `employees` in click time - you can see that objects in `children` have a field `data` that reference to this objects, so even `JSON.stringify` say `Uncaught TypeError: Converting circular structure to JSON` — Grundy, May 21 '15 at 12:36

Grundy · Accepted Answer · 2015-05-21T13:12:46.827

After binding your source to jqxTreeGrid it a small change it structure: add parent property, and data property, where data - reference to self.
As workaround, to avoid infinite recursion you need miss this property, something like

function iterate (obj){
    _.each(obj, function(ele, inx){
        if(typeof (ele) === "object" && ele !== obj && inx !== 'parent'){
            iterate(ele);
        }else{
            console.log(ele);
        }
    });
}

  var employees = 
      [{
      "EmployeeID": 2,
          "FirstName": "Andrew",
          "LastName": "Fuller",
          "Country": "USA",
          "Title": "Vice President, Sales",
          "HireDate": "1992-08-14 00:00:00",
          "BirthDate": "1952-02-19 00:00:00",
          "City": "Tacoma",
          "Address": "908 W. Capital Way",
     children: [{
          "EmployeeID": 8,
              "FirstName": "Laura",
              "LastName": "Callahan",
              "Country": "USA",
              "Title": "Inside Sales Coordinator",
              "HireDate": "1994-03-05 00:00:00",
              "BirthDate": "1958-01-09 00:00:00",
              "City": "Seattle",
              "Address": "4726 - 11th Ave. N.E."
      }, {
          "EmployeeID": 1,
              "FirstName": "Nancy",
              "LastName": "Davolio",
              "Country": "USA",
              "Title": "Sales Representative",
              "HireDate": "1992-05-01 00:00:00",
              "BirthDate": "1948-12-08 00:00:00",
              "City": "Seattle",
              "Address": "507 - 20th Ave. E.Apt. 2A"
      }, {
          "EmployeeID": 3,
              "FirstName": "Janet",
              "LastName": "Leverling",
              "Country": "USA",
              "Title": "Sales Representative",
              "HireDate": "1992-04-01 00:00:00",
              "BirthDate": "1963-08-30 00:00:00",
              "City": "Kirkland",
              "Address": "722 Moss Bay Blvd."
      }, {
          "EmployeeID": 4,
              "FirstName": "Margaret",
              "LastName": "Peacock",
              "Country": "USA",
              "Title": "Sales Representative",
              "HireDate": "1993-05-03 00:00:00",
              "BirthDate": "1937-09-19 00:00:00",
              "City": "Redmond",
              "Address": "4110 Old Redmond Rd."
      }, {
          "EmployeeID": 5,
              "FirstName": "Steven",
              "LastName": "Buchanan",
              "Country": "UK",
              "Title": "Sales Manager",
              "HireDate": "1993-10-17 00:00:00",
              "BirthDate": "1955-03-04 00:00:00",
              "City": "London",
              "Address": "14 Garrett Hill",
              "expanded": "true",
          children: [{
              "EmployeeID": 6,
                  "FirstName": "Michael",
                  "LastName": "Suyama",
                  "Country": "UK",
                  "Title": "Sales Representative",
                  "HireDate": "1993-10-17 00:00:00",
                  "BirthDate": "1963-07-02 00:00:00",
                  "City": "London",
                  "Address": "Coventry House Miner Rd."
          }, {
              "EmployeeID": 7,
                  "FirstName": "Robert",
                  "LastName": "King",
                  "Country": "UK",
                  "Title": "Sales Representative",
                  "HireDate": "1994-01-02 00:00:00",
                  "BirthDate": "1960-05-29 00:00:00",
                  "City": "London",
                  "Address": "Edgeham Hollow Winchester Way"
          }, {
              "EmployeeID": 9,
                  "FirstName": "Anne",
                  "LastName": "Dodsworth",
                  "Country": "UK",
                  "Title": "Sales Representative",
                  "HireDate": "1994-11-15 00:00:00",
                  "BirthDate": "1966-01-27 00:00:00",
                  "City": "London",
                  "Address": "7 Houndstooth Rd."
          }]
      }]
  }];

  //// prepare the data
  var source = {
      dataType: "json",
      dataFields: [{
          name: 'EmployeeID',
          type: 'number'
      }, {
          name: 'FirstName',
          type: 'string'
      }, {
          name: 'LastName',
          type: 'string'
      }, {
          name: 'Country',
          type: 'string'
      }, {
          name: 'City',
          type: 'string'
      }, {
          name: 'Address',
          type: 'string'
      }, {
          name: 'Title',
          type: 'string'
      }, {
          name: 'HireDate',
          type: 'date'
      }, {
          name: 'children',
          type: 'array'
      }, {
          name: 'expanded',
          type: 'bool'
      }, {
          name: 'BirthDate',
          type: 'date'
      }],
      hierarchy: {
          root: 'children'
      },
      id: 'EmployeeID',
      localData: employees
  };
  var dataAdapter = new $.jqx.dataAdapter(source);

  // create Tree Grid
  $("#treeGrid").jqxTreeGrid({
      width: 680,
      source: dataAdapter,
      editable: true,
      filterable: true,
      theme: 'energyblue',
      columns: [{
          text: 'FirstName',
          dataField: 'FirstName',
          width: 150
      }, {
          text: 'LastName',
          dataField: 'LastName',
          width: 120
      }, {
          text: 'Title',
          dataField: 'Title',
          width: 200
      }, {
          text: 'Birth Date',
          dataField: 'BirthDate',
          cellsFormat: 'd',
          width: 120
      }, {
          text: 'Hire Date',
          dataField: 'HireDate',
          cellsFormat: 'd',
          width: 120
      }, {
          text: 'Address',
          dataField: 'Address',
          width: 250
      }, {
          text: 'City',
          dataField: 'City',
          width: 120
      }, {
          text: 'Country',
          dataField: 'Country',
          width: 120
      }]

  });
  $("#jqxbutton").jqxButton({
      theme: 'energyblue',
      height: 30
  });
  $('#jqxbutton').click(function () {
      $("#treeGrid").jqxTreeGrid('expandRow',2);
      iterate(employees);
      });

  function iterate (obj){
    _.each(obj, function(ele, inx){
          if(typeof (ele) === "object" && ele !== obj && inx !== 'parent'){
              iterate(ele);
          }else{
              console.log(ele);
          }
      });
  }

<script src="http://documentcloud.github.io/underscore/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Expand a row" />

Yet another way: pass to source - deep cloned object

@Hasitha, I think it is better to use the cloned object as a source to such random changes will not break after binding something else :-) — Grundy, May 22 '15 at 06:25

score 1 · Answer 2 · answered May 21 '15 at 11:38

1

Hasitha, I think you are putting the object you are cataloging ("ele") back into the function itself.

instead of

createTreeMap(ele);

try something like this

createTreeMap(ele.child);

answered May 21 '15 at 11:38

Daniël Camps

1,737
1
22
33

2

So, you think `treeCatalog` and `ele` are the same object? Although you are probably right that `ele` itself shouldn't be passed to the function, I don't see why that would acount for the error. – Felix Kling May 21 '15 at 11:40
Well the `ele` is actually a single object within the object array. but i will try this solution :) – Hasitha Shan May 21 '15 at 11:53
I have updated the question with a fiddle which has the issue – Hasitha Shan May 21 '15 at 12:25

Nested JSON iterate, Maximum call stack size exceeded

2 Answers2