CODEWITHSUNDEEP
javascripthtmlangularjs
rishi007bansod
rishi007bansod

Reputation: 1469

Updating view after reading data from file in JavaScript

I am trying to run jsfiddle at https://jsfiddle.net/rishi007bansod/f7903drg/160/. In this java script, I am taking input from json file containing a json entry. For example file contains following entry :

{
    "a":5,
    "b":2,
    "f": 
    {
        "c":"test",
        "d":"test_json"
    }
}

After reading file I am trying to print json entry tree structure and assigning Add Node and Delete Node buttons with each entry to allow addition or deletion of nodes.

In code, I have initialized $scope.tree variable to value $scope.tree = [{name: "myTree", nodes: []}];. Then, I am trying to assign tree structure to $scope.tree variable after reading data from file. But $scope.tree variable is not getting updated(its value remains same as what we have initialized). Thus html view is not getting updated with this tree after reading data from json file. How can I update this view?

Upvotes: 0

Views: 81

Answers (2)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

The problem is that your function to read in the file data is async, but it does not notify AngularJS that it has completed. 

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Only angular providers are "synced" with the AngularJS digest cycle ($q, $http, $timeout, etc.). But, plain old document events are not, and must take an extra step to indicate to AngularJS that it needs to run another cycle.

 $scope.$apply(function() {
   $scope.tree = myTree;
 });

Working example: https://jsfiddle.net/f7903drg/161/

Upvotes: 1

Eduardo Yáñez Parareda
Eduardo Yáñez Parareda

Reputation: 10356

Well, you are updating the $scope.tree variable out of the scope of Angular lifecycle, so you need to call $scope.apply in handleFileSelect function, just at the end, or after assigning the value.

The problem with the input fields of type file is that to add an onChange you would need to write a custom directive, because the ng-change is not supported for those fields.

Upvotes: 2

Related Questions