Блог

Главная - Вопросы по программированию - Как получить var в глобальном объекте после завершения функции

Как получить var в глобальном объекте после завершения функции

#angularjs #function #wait #var

#angularjs #функция #подожди #var

Вопрос:

Есть функция, которая преобразует *.csv-файл в JSON. В функции я могу распечатать этот JSON на консоль.log console.log(jsonner); но я не могу передать его в Angular controller. $scope.names = jsonner; У меня есть 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 resu< //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;

}]);

Комментарии:

1. Object.assign(global, jsonner); это создаст глобальный jsonner и будет использовать его как global.jsonner в контроллере ur

2. Ошибка неперехваченной ссылки: jsonner не определен

3. куда я должен ее поместить?

4. в функции ur назначьте результат следующим образом global.jsonner = jsonner; и используйте в угловом контроллере global.jsonner

5. игнорирование 1-го комментария

Ответ №1:

Вы $scope.names указываете на оригинал jsonner в памяти. Вы создаете новый объект с jsonner = csvJSON(content); помощью, потому что он возвращает result массив. Вам придется изменить исходный массив, чтобы он обновлялся так, как вы хотите.

Вот демонстрация рабочей логики, чтобы вы начали: Демонстрация Plunker

К сожалению 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.resu<
          jsonner = csvJSON(e.target.result);
          console.log(jsonner);
          $scope.names = jsonner;
        });
      };

      reader.readAsText(file);
    };


}]);

Комментарии:

1. Где вызываются эти функции?

2. <body ng-controller=»ctrl2″> <идентификатор ввода=»fileInput» тип=»file» onchange=»processFiles(это. файлы)»> <идентификатор div=»fileOutput»></div> <div ng-repeat=»задачи в именах» class=»repeat»> <div class=»comname»>{{todo.Name }}</div> <класс div=»цена»>{{задачи. Цена}}</div> <div class=»изменить»>{{задача. Изменить}}</div> </div> </body>

3. Итак, эти функции вызываются в javascript за пределами angularjs. если вы использовали ng-change, то вы могли бы изменить строку на $scope.names = csvJSON(content); и в вашем контроллере поместить $scope.processFiles = function(files){ ...}

4. Как я должен написать ng-change?

5. <input id="fileInput" type="file" ng-change="processFiles(this.files)"> Возможно, вам придется обернуть логику внутри reader.onload = function (e) { } с помощью a $scope.$apply() , если $scope.names она не обновляется.

Метки: