函数完成后如何在全局对象中获取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);
};
}]);
具有将 *.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);
};
}]);