Use json as a data source when creating an Angular Tree Control

Question

I am using Angular Tree Control to build a tree and I would like to use a json file as the data source.

This is my HTML tag

<treecontrol class="tree-classic"
     tree-model="treedata"

And this is my javascript code to get the json file as an object

var JSON;
$.getJSON('data.json', function(response){
    JSON = response;
    alert(JSON.property);
 });
 $scope.treedata = JSON;

The path should be correct (there is only two files for my test, an index.html and the data.json both in the same folder). If I take the content of my json file and I simply paste it in a variable to get the object, it works. But when I read the file, the alert says that my JSON variable is empty.

Would you have an idea on how to fix this? Thank you very much.

Update

Following the idea of callbacks, I found this solution.

$.getJSON('data.json', function(response){
    $scope.$apply(function() { 
         $scope.treedata = response;
    });
});

Is there a better way to do this?

why alert(JSON.property) is used. why not just alert(JSON)? — Aleksey L.
– Aleksey L., Commented Jul 26, 2016 at 14:31

Aleksey L. · Accepted Answer · 2016-07-26 15:09:07Z

1

You're assigning $scope.treedata before $.getJSON completed. You should do it in success callback:

$.getJSON('data.json', function(response){
   $scope.$apply(function() { 
      $scope.treedata = response;
   });
});

You could use $scope.$apply in order to update bindings, but it is better to use $http service instead of $.getJSON

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

Don't forget to inject $http first

edited Jul 26, 2016 at 15:09

answered Jul 26, 2016 at 14:33

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Gourde Over a year ago

I tried but only got an empty tree. It seems the tree got the data correctly, but it does not show up. But it show up if I give it a json object. :S

David Gourde Over a year ago

I've added some informations. The callback helped, but it was not enough. Is there a way to do better than my $scope.$apply?

Collectives™ on Stack Overflow

Use json as a data source when creating an Angular Tree Control

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related