How to populate Ng-Grid from CSV file?

Question

I want to create client-side javascript that reads a csv file on the web server and uses that data to populate a grid created with Ng-Grid. I'm attempting to use jQuery-CSV to transform the CSV into something the grid can use. I'm new to using these js libraries...what am I missing?

Plunker Code

Script:

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

Error message from FireFox debugger console:

"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'); doesn't automatically return the data, it returns a jqXHR (jQuery XMLHttpRequest) object.

You're trying to convert a jqXHR object, not the contents of the csv.

Read up on how $.get works here: http://api.jquery.com/jquery.get/

You should probably use angular's utilities anyway

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

Answer 2

This works better for me using file input and custom (see link) fileread attribute!

You can control the button text by jQuery's plug-in.

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

Define a fileread attribute for file input by a directive

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