はじめに
csvファイルを読み込んで、json形式にパースするまでを行う。
前提
angularJSを使用します。
使用するライブラリは下記になります。
◎csvパース用
angular-PapaParse
angular-PapaParseはPapa Parseをangularでラップしたものになります。
その為、使い方はPapa Parseのサイトを見ると詳しくわかります。
◎csvファイル読み込み用
ng-file-upload
ファイルを取得する為に使用しています。このライブラリである必要は特に無いです。
※ng-file-uploadの使い方の説明は省きます。
使い方
◎ローカルのcsvファイルをjson形式にパースします。
Papa.parse関数の引数として、fileオブジェクトを渡します。
<button ngf-select ng-model="files" ngf-change="parseFile(files)">csvファイル選択<button>
angular.module('App', [])
.controller(AppCtrl, ['$scope', function($scope) {
$scope.parseFile = function(files) {
Papa.parse(files[0], {
complete: function(results) {
},
error:function(){
}
})
}
}]);
◎サーバー上のcsvファイルをjson形式にパースします。
Papa.parse関数の引数として、fileパスを渡します。
プロパティとしてdownloadを追加します。
<button ng-click="parseFile('http://www.hogehoge/sample.csv')">csvをパース<button>
angular.module('App', [])
.controller(AppCtrl, ['$scope', function($scope) {
$scope.parseFile = function(url) {
Papa.parse(url, {
download:true,
complete: function(results) {
}
})
}
}]);
◎大きいデータを扱う場合
stepプロパティを使用することで、ストリーミングでデータを取得することができます。
stepの引数にはcsvの1行ごとに結果が返却されます。
<button ng-click="parseFile('http://www.hogehoge/sample.csv')">csvをパース<button>
angular.module('App', [])
.controller(AppCtrl, ['$scope', function($scope) {
$scope.parseFile = function(url) {
Papa.parse(url, {
step: function(row) {
console.log(row.data);
},
download:true,
complete: function(results) {
}
})
}
}]);
◎ファイルのエンコードを指定する
下記条件でcsvをパースした場合文字化けをした。
・csvがShift-JISで作成されている
・jsがUTF-8で記載されている
encodingプロパティを追加して'Shift-JIS'を指定したら文字化けが解消した。
<button ngf-select ng-model="files" ngf-change="parseFile(files)">csvファイル選択<button>
angular.module('App', [])
.controller(AppCtrl, ['$scope', function($scope) {
$scope.parseFile = function(files) {
Papa.parse(files[0], {
encoding: 'Shift-JIS',
complete: function(results) {
},
error:function(){
}
})
}
}]);
◎ヘッダーの制御
csvの１行目が各カラムのタイトルとなっている場合に
headerプロパティを使用します。
"header1","header2","header3","header4","header5"
"A","B","C","D","E"
<button ngf-select ng-model="files" ngf-change="parseFile(files)">csvファイル選択<button>
angular.module('App', [])
.controller(AppCtrl, ['$scope', function($scope) {
$scope.parseFile = function(files) {
Papa.parse(files[0], {
header: true,
complete: function(results) {
console.log(results.data)
},
error:function(){
}
})
}
}]);
結果
//header:true
data: {
[
header1: "A"
header2: "B"
header3: "C"
header4: "D"
header5: "E"
]
}
//header:false
data: {
[
0: "header1"
1: "header2"
2: "header3"
3: "header4"
4: "header5"
], [
0: "A"
1: "B"
2: "C"
3: "D"
4: "E"
]
}
◎データを数字として取得する
データ内の数値(String型）をNumber型として取得したい場合に、
dynamicTypingプロパティを使用する。
"1.234","200","+3","-4","05"
<button ngf-select ng-model="files" ngf-change="parseFile(files)">csvファイル選択<button>
angular.module('App', [])
.controller(AppCtrl, ['$scope', function($scope) {
$scope.parseFile = function(files) {
Papa.parse(files[0], {
dynamicTyping: true,
complete: function(results) {
console.log(results.data)
},
error:function(){
}
})
}
}]);
結果
//dynamicTyping:true
data: {
[
0: 1.234
1: 200
2: "+3"
3: -4
4: 5
]
}
//dynamicTyping:false
data: {
[
header1: "1.234"
header2: "200"
header3: "+3"
header4: "-4"
header5: "05"
]
}
記載した内容以外にも便利な機能があるようなので、詳しくはPapaParseのドキュメントページを見てみてください。