今年の夏はコロナウィルスの影響で実家帰省がなくなってしまいました泣。。。
仕方ないですね。。。
で、急遽時間ができましたので以前作成したポケモンレーダーチャートをReactに移行させようかな？
と思い立ち、作業を実施しました。
、、、が
結構大変です。。。
半日ぐらい作業していますが完成できておらず。。。
今回は移行にはまった部分であるcsvファイルの読み出しとjsonデータ変換についてまとめていこうと思います。
■事前準備
csvファイルをjsonデータに変換する場合、papaPaseを用いるのが良いとのこと。
papaPaseライブラリをインストールするには下記を実行。
npm install papaPase or yarn add papaPase
■実装方法
papaPaseを利用して、csvファイルからjsonデータに変換するソースは下記となります。
import React, { Component } from 'react';
import Papa from 'papaparse';
export default class pokechart extends React.Component {
constructor (props) {
super(props);
this.state = {
csvfile:undefined
};
}
getCSV = () =>{
return new Promise(resolve =>{
var buf;
const { csvfile } = this.state;
Papa.parse(csvfile, {
header: true,
delimiter:',',
complete:(buf) =>{
console.log(buf.data);
},
});
});
}
handleChange = event => {
console.log(event.target.files[0]);
this.setState({
csvfile: event.target.files[0];
});
this.getCSV();
}
render() {
return (<div>
<input type="file" onChange={this.handleChange} />
</div>);
}
}こちらですが、ファイルとしてcsvファイルを選択するとhandleChange イベントが実行します。
handleChangeイベントでは選択されたファイルを読み出して、その結果を取得、変数へセットします。
そして、getCSV()関数をコールします。
getCSV()関数にてcsvファイル読み出し結果をPapa.parseによりjsonデータに変換しています。
ここで、delimiterにて区切り文字を指定するひつようがあるのですが、今回","を指定しています。
※もしかしたらデフォルトで問題ないのかもしれないのですが、こちらで実施した時にエラーになったので念のため定義しています。
変換結果はcompleteプロパティにセットされるのですが、今回はconsole.logでログ出力するのみとなっております。
