html+javascriptでcsvファイルをjsonデータへjsonデータをcsvファイルに変換
先日、javascritptでjsonファイルを読み出したり、書き出す処理についてまとめました。
elsammit-beginnerblg.hatenablog.com
こちらのファイル読み込み・出力を行うにあたり、
json⇔csv、
json⇒xml、
xml⇒csv、
と変換できるツール的なものが作成できれば面白そうだな。
と思い作成を進めております。
今回は、
json⇔csv
のパターンである、jsonファイル⇒csvファイルに変換したりcsvファイル⇒jsonファイルに変換する方法についてまとめたいと思います。
■前提について
今回の変換ですが、様々なパターンでの変換を考えていることもあり、
内部処理ではjsonデータにして扱うことにしました。
※理由はキーとvalueが分割して扱うことが出来るのでやりやすそうだったから。
このため、今回のコードも
csvファイルを一旦jsonデータに変換してからjsonファイルとして出力したり、
jsonファイルから読み出したjsonデータをcsvファイルとして出力したりしております。
また今回取り扱うデータについても、
{
"type":"man",
"name":"ニック",
"age":20
}といった形式とします。
またcsvファイルの形式ですが下記の通り、
1行目にキー名を定義、
2行目以降をvalue
としております。
■csvファイルからデータを読み出してjsonデータに変換
ではまずはcsvファイルから読み出したcsv形式データからjsonデータに変換していきます。
csvファイルの読み出しですが、jsonファイルの読み出しと同じコードを利用できるため割愛します。
※詳細をチェックしたい方はこちらをご確認ください。
elsammit-beginnerblg.hatenablog.com
コードはこちら。
function csv2json(csvArray){ let jsonArray = []; let RowArray = csvArray.split('\n'); let items = RowArray[0].split(','); for(let i = 1; i < RowArray.length; i++){ let cellArray = RowArray[i].split(','); let line = new Object(); for(let j = 0; j < items.length; j++){ line[items[j]] = cellArray[j]; } jsonArray.push(a_line); } return jsonArray; }
引数としてcsvファイルから読み出したデータ群を渡します。
今回のcsvファイル(データ)の一行目はキー名として定義しているので、
let RowArray = csvArray.split('\n'); let items = RowArray[0].split(',');
としてitems内にキー名を配列として格納いたしました。
要するに、
items[0]：type
items[1]：name
items[2]：age
がそれぞれ格納されているわけです。
次に各valueを取り出します。
RowArray に各行ごとの文字列が格納されているので、
1行ごとにカンマ区切りで文字列を分割し、それを変数に格納すればよいです。
for(let i = 1; i < RowArray.length; i++){ let cellArray = RowArray[i].split(','); let line = new Object(); for(let j = 0; j < items.length; j++){ line[items[j]] = cellArray[j]; } jsonArray.push(a_line); }
カンマ区切りのデータを分割して格納する変数はcellArray になります。
cellArrayによりカンマ区切りで分割されたデータをキーに合わせて格納しているのがlineになります。
lineに格納する際にjsonデータの形に加工しているわけです。
最後にjsonArrayという、jsonデータ配列にプッシュしていきjsonデータ群を返しております。
長々書いてしまいましたが、やっていることは至極シンプルで
・csv形式のデータを行分割
・行分割したデータをカンマ区切りで分割
・分割したデータをjsonデータに格納
・返却用の変数にjsonデータをpush
を行っているのみです。
■jsonデータをcsvファイルに変換・出力
では次にjsonデータをcsvファイルとして出力してみます。
jsonデータをcsv形式に変換するコードはこちら。
function json2csv(json) { let ret= Object.keys(json[1]).join(',') + "\n"; ret += json.map(function(d){ return Object.keys(d).map(function(key) { return d[key]; }).join(','); }).join('\n'); return ret; }
まずcsvファイルの1行目はキー名となるので、
let ret= Object.keys(json[1]).join(',') + "\n";
といったようにキー名をカンマ区切りでret変数に文字列として格納します。
そしてvalueは、
ret += json.map(function(d){ return Object.keys(d).map(function(key) { return d[key]; }).join(','); }).join('\n');
というように各キー名にあったvalueを取り出してカンマ区切りの文字列に変換⇒ret変数に格納を繰り返しております。
csv形式のデータをcsvファイルに変換するコードですが、
こちらも先日のjsonファイル出力時と同様のコードになるため、詳細は省きますが、、、
コードとしてこちらのようになります。
function WriteToCSV(){ let bom = new Uint8Array([0xEF, 0xBB, 0xBF]); let hugastring = json2csv(huga); let blob = new Blob([bom, hugastring],{type:"text/plan"}); let link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = '作ったファイル.csv'; link.click(); }
