Exceeded call stack size due to iterating through nested JSON structures

Question

Exceeded call stack size due to iterating through nested JSON structures

I'm currently working on a recursive function to navigate through a nested JSON structure. However, I've run into an error that says:

Maximum call stack exceeded

The function I've written looks like this:

function createTreeMap (treeCatalog){
  var _this = this;

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

    }
  });

}

The JSON data I'm traversing through is structured as follows:

[{
    "EmployeeID": 2,
    "FirstName": "Andrew",
    //... employee details here
    children: [{
        "EmployeeID": 8,
        "FirstName": "Laura",
        //... more employee details
    }, {
        //... additional employees
    }]
}];

I suspect that the issue may be related to similar child property names. Is there a proper way to address this while keeping the requirement for similar child names?

Thank you for your assistance :)

UPDATE

Check out this example that demonstrates the issue I'm facing: http://jsfiddle.net/qaoapays/1/

javascript json recursion underscore.js jqxtreegrid

Answer 1

Answer №1

Upon attaching your source to jqxTreeGrid, a minor modification is required in its structure: include the parent property and the data property, where data is a reference to itself.
As a workaround to prevent infinite recursion, you need to exclude this property, like so:

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

 // Sample employee data
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."
      }, 
      // Add more employees here
      }],
  }];

  //// prepare the data
  // Data source setup
  var source = {
      dataType: "json",
      dataFields: [{

          // Define data fields
      }],
      hierarchy: {
          root: 'children'
      },
      id: 'EmployeeID',
      localData: employees
  };
  var dataAdapter = new $.jqx.dataAdapter(source);

  // create Tree Grid
  $("#treeGrid").jqxTreeGrid({
      // Configure Tree Grid
  });
  $("#jqxbutton").jqxButton({
      // Setup button
  });
  $('#jqxbutton').click(function () {
      // Button click action
      $("#treeGrid").jqxTreeGrid('expandRow',2);
      iterate(employees);
      });

  function iterate (obj){
    // Recursive function
  }

<script src=" inserted script resources here "></script>
    // Include necessary scripts and styles
<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Expand a row" />

Alternatively, you can resolve this issue by passing a deep-cloned object to the data source.

Answer 2

Upon attaching your source to jqxTreeGrid, a minor modification is required in its structure: include the parent property and the data property, where data is a reference to itself.
As a workaround to prevent infinite recursion, you need to exclude this property, like so:

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

 // Sample employee data
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."
      }, 
      // Add more employees here
      }],
  }];

  //// prepare the data
  // Data source setup
  var source = {
      dataType: "json",
      dataFields: [{

          // Define data fields
      }],
      hierarchy: {
          root: 'children'
      },
      id: 'EmployeeID',
      localData: employees
  };
  var dataAdapter = new $.jqx.dataAdapter(source);

  // create Tree Grid
  $("#treeGrid").jqxTreeGrid({
      // Configure Tree Grid
  });
  $("#jqxbutton").jqxButton({
      // Setup button
  });
  $('#jqxbutton').click(function () {
      // Button click action
      $("#treeGrid").jqxTreeGrid('expandRow',2);
      iterate(employees);
      });

  function iterate (obj){
    // Recursive function
  }

<script src=" inserted script resources here "></script>
    // Include necessary scripts and styles
<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Expand a row" />

Alternatively, you can resolve this issue by passing a deep-cloned object to the data source.

Answer 3

Answer №2

It appears that you may be mistakenly placing the object you are labeling as "ele" back into the function itself, Hasitha.

Instead of:

createTreeMap(ele);

Consider trying:

createTreeMap(ele.child);

Answer 4

It appears that you may be mistakenly placing the object you are labeling as "ele" back into the function itself, Hasitha.

Instead of:

createTreeMap(ele);

Consider trying:

createTreeMap(ele.child);

Exceeded call stack size due to iterating through nested JSON structures

Answer №1

Answer №2

Similar questions

Ways to verify the presence of an item in a MonoDB array

Submitting a specific form when a change occurs in CodeIgniter

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

Using JavaScript arrays to populate an HTML form

Unable to render page with scrapy and javascript using splash

What causes z-index to be ineffective with sticky elements?

Extract data from a JSON file containing only the root element on an Android device

Is there a way for me to verify if I have already made an AJAX data request

Attempting to clear the value of a state property using the delete method is proving to be ineffective

Is it possible to share a Vue.js component by "transferring" it rather than duplicating it?

What could be causing the string arrays in my array to unexpectedly become null values?

What is the maximum number of JavaScript functions allowed in a single HTML file?

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

I am looking to dynamically generate HTML elements using AngularJS based on data from a JSON file

I am seeking assistance in troubleshooting this javascript code. Can someone please help me identify the issue?

The Authorization header in POST and PATCH fetch requests is stripped by Typescript

Converting an HTMLElement to a Node in Typescript

Ways to retrieve the state from the Redux store

Dynamic JSX tag including attributes