如何从CSV文件填充Ng-Grid

Question

我想创建客户端javascript，它读取Web服务器上的csv文件，并使用该数据填充使用Ng-Grid创建的网格。我正在尝试使用jQuery-CSV将CSV转换为网格可以使用的东西。我是使用这些 js 库的新手...我错过了什么？

普伦克代码

脚本：

var app = angular.module('myApp', ['ngGrid']);
var csvData = $.get('X65.csv'); //read the csv file
var objectData = $.csv.toObjects(csvData); //convert to object data, this link breaks the script
app.controller('MyCtrl', function($scope) {
  $scope.myData = objectData; //load the grid with data
  $scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{ field: "app", width: '***' },
            { field: "farm", width: '*' },
            { field: "silo", width: '*' },
            { field: "server", width: '**' },
            { field: "user", width: '***' }],
    showGroupPanel: true
  };
});

来自 FireFox 调试器控制台的错误消息：

"Error: Argument 'MyCtrl' is not a function, got undefined
qa@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16
ra@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16
@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:50
B/j/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42
m@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:6
j@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42
e@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38
e@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38
w/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:37
qb/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
e.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86
e.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86
qb/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:26
qb@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
kc@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:158
p.Callbacks/k@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
p.Callbacks/l.fireWith@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
.ready@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
D@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
"

Answer 1

var csvData = $.get('X65.csv'); 不会自动返回数据，而是返回一个 jqXHR （jQuery XMLHttpRequest） 对象。

您正在尝试转换 jqXHR 对象，而不是 csv 的内容。

在此处阅读$.get的工作原理：http://api.jquery.com/jquery.get/

无论如何，您可能应该使用angular的实用程序

$http.get('X65.csv').success(function (data) { 
    objectData = $.csv.toObjects(data); 
}

Answer 2

这对我来说使用文件输入和自定义（请参阅链接）fileread 属性效果更好！

您可以通过jQuery的插件控制按钮文本。

$("#fileImport").inputFileText({ text: "Import sheet" });

通过指令为文件输入定义文件读取属性

<script src="_assets/JS-Main/jquery-input-file-text.js"></script>
<input type="file" id="fileImport" accept=".xls,.xlsx,.ods" fileread="" opts="uiGrid306" multiple="false"/>