Егор Кротенко Егор Кротенко - 1 month ago 5
AngularJS Question

How to get var in global object after function complete

Have a function that's convert *.csv file to JSON.
In function I can print this JSON to console.log console.log(jsonner);
but I can't transfer it to Angular controller. $scope.names = jsonner;
I have 2 problems: how wait fuction, and how makes var jsonner global.

function csvJSON(csv){

var lines=csv.split("\n");
var result = [];
var headers=lines[0].split(",");

for(var i=1;i<lines.length;i++){

var obj = {};
var currentline=lines[i].split(",");

for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}

result.push(obj);

}

//return result; //JavaScript object
return JSON.stringify(result); //JSON
}

function processFiles(files) {
var file = files[0];
var reader = new FileReader();
reader.onload = function (e) {
// Когда это событие активируется, данные готовы.
// Вставляем их в страницу в элемент <div>
var output = document.getElementById("fileOutput");
output.textContent = e.target.result;
content = output.textContent;
jsonner = csvJSON(content);
console.log(jsonner);
};
reader.readAsText(file);

}




var SearchApp = angular.module('SearchApp',[]);
SearchApp.controller('ctrl2', ['$scope', function($scope){
// Here the array would be your response.text:
$scope.names = jsonner;

}]);

Answer

You're $scope.names is pointing to the original jsonner in memory. You're creating a new object with jsonner = csvJSON(content); because it returns the result array. You would have to modify the original array to get it to update the way you want.

Here is a demo of the working logic to get you started: Plunker Demo

Unfortunately file inputs don't work with ng-change, however there's a couple workarounds. You can do this:

<input id="fileInput" type="file" ng-model="files" onchange="angular.element(this).scope().processFiles(this)">

or you can wire up the event using element.on('change', processFiles) within a custom directive. Here's what I did:

<body ng-controller="ctrl2">
  <input id="fileInput" type="file" ng-model="files" onchange="angular.element(this).scope().processFiles(this)">
  <div>{{ output }}</div>

  <div ng-repeat="todo in names track by $index" class="repeat">
      <div class="comname">{{todo.Name}}</div>
      <div class="price">{{todo.Price}}</div>
      <div class="change">{{todo.Change}}</div>
  </div>
</body>

and the logic:

var SearchApp = angular.module('SearchApp', []);
SearchApp.controller('ctrl2', ['$scope', function ($scope) {
    $scope.processFiles = function (element) {
      var file = element.files[0];
      var reader = new FileReader();

      reader.onload = function (e) {
        // Need to notify angular of this event using $apply
        $scope.$apply(function() {
          // Когда это событие активируется, данные готовы.
          // Вставляем их в страницу в элемент <div>
          var output = document.getElementById("fileOutput");
          $scope.output = e.target.result;
          jsonner = csvJSON(e.target.result);
          console.log(jsonner);
          $scope.names = jsonner;
        });
      };

      reader.readAsText(file);
    };


}]);