Angularjs treeview with json file data

Question

I used AngularJs TreeView example JSFiddle

it work very well, but my problem now is when i try to read the data from a json file like the code above the tree show nothing and when i try to print data of $scope.roleList1 i found that it's empty someone know why please?

Before :

$scope.roleList1 = [
    { "roleName" : "User", "roleId" : "role1", "children" : [
      { "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
      { "roleName" : "subUser2", "roleId" : "role12", "children" : [
        { "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Admin", "roleId" : "role2", "children" : [] },

    { "roleName" : "Guest", "roleId" : "role3", "children" : [] }
  ];
 $scope.roleList = $scope.roleList1;

After :

var jsondata;
$scope.roleList1=[];
  $.getJSON('data.json', function(data) {

                    jsondata=data;

            $scope.roleList1.push(data);
                    });
 $scope.roleList = $scope.roleList1;

It's asynchronous. your last line will be executed before any data is pushed to roleList1 — kasoban, Aug 26 '15 at 13:49
possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — kasoban, Aug 26 '15 at 13:54
Read it. It's not the same question, but most likely the same problem. As a test, try the following: http://pastebin.com/Be3wg3v2 — kasoban, Aug 26 '15 at 14:55
It's a page to paste text. In this case your modified example code, I can't really post code here as a comment... — kasoban, Aug 27 '15 at 07:51

gabo · Answer 1 · 2015-08-26T14:11:33.350

1

Couple of things you could look into. First, are you actually getting the data from your getJson call? If not you need to be able to get it from an endpoint on your server, it seems like you are trying to access a local file using ajax.

If you are getting your data from the server I have a suspicion that it is an array of objects and you are pushing an array into another array which will end up looking like [[{...},{...}]] instead of [{...},{...}]. You also don't need to have those two rolelist vars. So I would change the code to be:

$scope.roleList = [];
$.getJSON('data.json', function(data) {
     $scope.roleList = data;
});

Even then it won't work because you are using jQuery ajax function instead of angular's and that won't trigger a digest cycle. So I would change your code to be:

$scope.roleList = [];
$http.get('data.json').then(function(response) {
     $scope.roleList = response.data;
}));

edited Aug 26 '15 at 14:11

answered Aug 26 '15 at 14:04

gabo

163
1
8

Thank you for your answer i use tomcat server for my javaee application and my data file is in the webContent i already try $scope.roleList = []; $.getJSON('data.json', function(data) { $scope.roleList = data; }); but when i do console.log($scope.roleList) it return me an empty array " []" – Dev java Aug 26 '15 at 14:43
Are you doing console.log inside the callback i.e. function(data) { $scope.roleList = data; console.log($scope.roleList); }); – gabo Aug 26 '15 at 14:56
in a first time i put it inside it print the data but tree doesn't work, when i put it outside i have an empty array -->tree doesn't work – Dev java Aug 26 '15 at 15:01
Well it's asynchronous which means you will have empty array until the request is fulfilled. It will also not show up because you are using $.getJSON instead of angular's $http. That means you won't get a digest cycle to trigger (see link in my answer). That's why I suggest using angular's $http. If you really really want to use $.getJSON then you need to change your code to $.getJSON('data.json', function(data) { $scope.apply(function() {$scope.roleList = data;}) }); – gabo Aug 26 '15 at 15:19
Thank you to explain to me, but i still show nothing when using http and when using apply i don't hava error when i do console.log( $scope.roleList); outside the http it return me an empty array – Dev java Aug 26 '15 at 15:31
Do you see a response with the data in the network tab of your dev tools? – gabo Aug 26 '15 at 15:39
Here's a working example so you have something to compare with: http://plnkr.co/edit/1K7RHZ0390sv5AjhrJs4?p=preview – gabo Aug 26 '15 at 15:50
yeah but when i try console.log( $scope.users); just after http close i get an empty array it not resolve the problem :( – Dev java Aug 26 '15 at 16:10
That is because it is asynchronous. $http.get('https://api.github.com/users').then(function(response) { $scope.users = response.data; }); console.log($scope.users); Will not work, because the data has not come down yet. As you can see in my example the data is being displayed on the screen which means it did get it. If that doesn't help then I would suggest watching this video: http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html – gabo Aug 26 '15 at 16:15

Angularjs treeview with json file data

1 Answers1