2018年9月27日木曜日
Javascript CSVファイルを読み込む方法
Pythonのように直接、ファイルを開いて操作はできないので、2つの方法。
Python:
with open('test.csv', encoding = 'utf-8') as csvfile:
csvreader = csv.reader(csvfile)
next(csvreader)
とかの記述が楽だな。
では、Javascript
1. APIを利用する方法
*これはファイルをユーザに選択させるという操作プロセスがマッチしないのだが
<body>
<form name="myform">
<input name="myfile" type="file" /><br/>
<textarea name="output" cols="80" rows="10"></textarea>
<p>\n時点の配列</p>
<li><span id="001"></span></li>
<li><span id="002"></span></li>
<li><span id="003"></span></li>
<p>002の表示</p>
<li><span id="004"></span></li>
<li><span id="005"></span></li>
<li><span id="006"></span></li>
</form>
<script type="text/javascript">
var form = document.forms.myform;
form.myfile.addEventListener( 'change', function(e) {
var result = e.target.files[0];
//①FileReaderのオブジェクトを作成する
var reader = new FileReader();
//②読み込んだファイルの中身を取得する
reader.readAsText( result );
//③ファイルの中身を取得後に処理を行う
reader.addEventListener( 'load', function() {
//④ファイルの中身をtextarea内に表示する
form.output.textContent = reader.result;
array = reader.result.split('\n'); //この時点では、まだ一次元配列
document.getElementById("001").innerHTML = array;//全表示
document.getElementById("002").innerHTML = array[0];//全表示
document.getElementById("003").innerHTML = array[1];//全表示
//⑤ カンマで区切って２次元配列に変換
var twoDimensionArray =[];
for ( i =0; i < array.length; i++){
twoDimensionArray[i] = array[i].split(',')
}
document.getElementById("004").innerHTML = twoDimensionArray;//全表示
document.getElementById("005").innerHTML = twoDimensionArray[0][0];//全表示
document.getElementById("006").innerHTML = twoDimensionArray[1][3];//全表示
})
})
</script>
</body>
2. XMLHttpRequest(); を利用。
この方法だと、ローカルＰＣではhttpリクエストが機能しないので、サーバー利用が必須。
ローカルＰＣで挙動確認ができないのが、痛い。
<script type="text/javascript">
//CSVファイルを読み込む関数getCSV()の定義
function getCSV(){
var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
req.open("get", "test3.csv", true); // アクセスするファイルを指定
req.send(null); // HTTPリクエストの発行
// レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ
req.onload = function(){
convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ
}
}
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
var result = []; // 最終的な二次元配列を入れるための配列
var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
for(var i=0;i<tmp.length;++i){
result[i] = tmp[i].split(',');
}
alert(result[1][2]); // 300yen
}
getCSV(); //最初に実行される
</script>
3．参考
JavaScriptでファイル処理! JSONやCSVなどのファイルを読み込もう
https://www.sejuku.net/blog/32532
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿