未捕获RangeError:超出最大调用堆栈大小。 jstree

时间:2016-07-05 18:39:36

标签: javascript arrays angularjs jstree

我收到此错误,并且不知道如何解决此问题

  

未捕获RangeError:超出最大调用堆栈大小

我尝试使用jstree lib构建树。数据来自两个不同的http调用。 我得到的初始数据如下:

           $scope.treeFolders = [];
        $scope.treeFilters = [];
        $scope.tree = [];
    var folders = function () {
        $http.get("folders.json")
        .success(function (res) {
                    angular.forEach(res, function(parent){
                      // console.log(parent)
                        if(!("parent" in parent)){
                          parent.parent = "#"
                        }
                    })

                     $scope.treeFolders = res
                     console.log($scope.treeFolders)
                });
        };
        folders();

    var filters = function(){
            $http.get("child.json")
               .success(function (res) {
                    angular.forEach(res, function(obj){
                        if(!("parent" in obj)){
                          // console.log(obj.folderId)
                            obj.parent = obj.folderId;
                        }
                        // console.log(obj)
                    });

                    $scope.treeFilters = res;
                    console.log($scope.treeFilters)

                });
    };
  filters();

console.log返回数组,现在一切都很好。然后我使用函数load将两个数组合并为一个超级数组

    $scope.load = function(){
    // method 1
            $scope.tree = $scope.treeFolders.concat($scope.treeFilters);
          console.log(JSON.stringify($scope.tree))
    // method 2      
        // $scope.treeFolders.forEach(function(item){
        // $scope.tree.push(item)
        // })
        // $scope.treeFilters.forEach(function(item){
        // $scope.tree.push(item)
        // })
        // console.log(JSON.stringify($scope.tree))
        }

正如你所看到的,我试图通过两种方法获得一个数组,这两种方法都可以工作,我得到了这个数组

  [{
"id":1,
"userId":1,
"createdDt":"2016-06-27T13:05:03.000+0000",
"text":"folder",
"parent":"#"
  },{
"id":2,
"parent":1,
"userId":1,
"createdDt":"2016-06-27T13:26:45.000+0000",
"text":"child folder"
  },{
"id":2,
"folderId":2,
"folder":{"id":2,"text":"child folder"},
"body":"empty",
"user":{"id":1,"name":"User 1"},
"userId":1,
"createdDt":"2016-06-27T13:05:47.000+0000",
"text":"filter 1",
"parent":2
  },{
"id":3,
"folderId":2,
"folder":{"id":2,"text":"child folder"},
"body":"nothing",
"user":{"id":1,"name":"User 1"},
"userId":1,"createdDt":"2016-06-27T13:00:00.000+0000",
"text":"filter 4",
"parent":2
  }]

遵循逻辑jstree文档,我的树应该看起来像

* Folder (root) 
---- * Child Folder (parent)
     ---- * Filter 1 (Child)
     ---- * Filter 4 (Child)

但是我得到的错误是某处迭代太多了。有人能帮助我找到我的错误吗?先感谢您。 Plunker已附上

1 个答案:

答案 0 :(得分:5)

您的数组包含两个带有“id”的项目:2,其中一个项目的父项定义为“id”:2。这可能会创建一个循环引用。

尝试将您的第一个子项目的ID更改为4,我在您的plunker链接上执行该操作,并按照您要查找的方式加载树。