函数完成后如何在全局对象中获取var

How to get var in global object after function complete

具有将 *.csv 文件转换为 JSON 的功能。 在函数中,我可以将此 JSON 打印到 console.log console.log(jsonner); 但我无法将其传输到 Angular 控制器。 $scope.names = 杰森纳; 我有 2 个问题:如何等待函数,以及如何使 var jsonner 全局化。

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;

}]);

$scope.names指向内存中原来的jsonner。您正在使用 jsonner = csvJSON(content); 创建一个新对象,因为它 returns result 数组。您将不得不修改原始数组以使其以您想要的方式更新。

这是一个让您入门的工作逻辑演示:Plunker Demo

不幸的是,file 输入不适用于 ng-change,但是有一些解决方法。你可以这样做:

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

或者您可以在自定义指令中使用 element.on('change', processFiles) 连接事件。这是我所做的:

<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>

逻辑:

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);
    };


}]);