html+javascriptでフロントエンドにてjsonファイルの読み込み・書き出し
前回まで動画や画像処理について備忘録まとめてきましたが、
今回は打って変わってjavascriptでのjsonデータやjsonファイルの取り扱いについてまとめていきたいと思います。
ちょうどjsonファイルを取り扱ってデータ管理する必要があったのですが、
アプリを作成すると配布するのが面倒だったのであえてhtml+javascriptでやってみることにしました！！
■使用するjsonデータ形式
今回使用するjsonデータはこちらとします。
※こちらのjsonデータは必要に応じて置き換えてみてください。
{
"type":"man",
"name":"ニック",
"age":20
}
■jsonファイルを読み込む
それでは早速jsonファイルを読み込む処理を作成していきます。
htmlのコードはこちらのようになります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="text/html; charset=UTF-8"> <script type="text/javascript" src="jsonRead.js"></script> </head> <body> <input id="file1" type="file" onChange="fileChanged(this)" multiple> </body> </html>
ここで、javascriptファイル名をjsonRead.jsとしました。
実施していることは単純で、
<input id="file1" type="file" onChange="fileChanged(this)" multiple>
にてinputでファイル選択欄を作成し、ファイルが選択されたらfileChanged(this)をコールといった処理があるだけです。
ただファイルを読み込むだけではつまらないので読み込んだファイルをリストとして出力できるように、inputタグの下に、
<table border="1" id="table1"> <tr> <th>性別</th> <th>名前</th> <th>年齢</th> </tr> </table>
を追記しておきます。
次にjavascriptでの処理です。
コードはこちら。
let reader = new FileReader(); let huga = []; // 管理するデータリスト let fileCount = 1; // ファイル選択画面にてファイルを選択した際の割り込み. function fileChanged(input){ huga = []; // 初期化. for(let i = 0; i < input.files.length; i++){ reader.readAsText(input.files[i], 'UTF-8'); reader.onload = () =>{ //console.log(reader.result); huga = JSON.parse(reader.result); let table = document.getElementById('table1'); while (table.rows.length > 1){ table.deleteRow(1); } //テーブルへのjsonデータ書き込み for(let j = 0;j < huga.length;j++){ let row = table.insertRow(-1); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); let checkBox = '<input type="radio" name="selectBtn" value="select'+j+'">' cell1.innerHTML = "<input type='text' id='type" + j + "' onChange='ChangeText(" + (j*10+1) + ")' value='" + huga[j].type + "'>" cell2.innerHTML = "<input type='text' id='name" + j + "' onChange='ChangeText(" + (j*10+2) + ")' value='" + huga[j].name+ "'>" cell3.innerHTML = "<input type='text' id='age" + j + "' onChange='ChangeText(" + (j*10+3) + ")' value='" + huga[j].age + "'>" } }
htmlと比較して少し長めですね。
htmlのコードの際にもご紹介しましたが、
実施していることとしては、fileChanged関数がファイル選択時に実行される処理になります。
こちらの関数がコールされると、
for(let i = 0; i < input.files.length; i++){ reader.readAsText(input.files[i], 'UTF-8'); reader.onload = () =>{ //console.log(reader.result); huga = JSON.parse(reader.result);
にて読み込んだファイル内のデータを読み出し、テキストデータとしてreader.resultに格納されます。
このreader.resultをJSON.parseによりjsonデータに変換、huga変数に格納しています。
JSON.parse以降の処理はテーブルへのデータ書き込みの処理にあたります。
var table = document.getElementById('table1');
にてtable1のidを持つ要素をtable変数に格納し、
for(let j = 0;j < huga.length;j++){ let row = table.insertRow(-1); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); let checkBox = '<input type="radio" name="selectBtn" value="select'+j+'">' cell1.innerHTML = "<input type='text' id='type" + j + "' onChange='ChangeText(" + (j*10+1) + ")' value='" + huga[j].type + "'>" cell2.innerHTML = "<input type='text' id='name" + j + "' onChange='ChangeText(" + (j*10+2) + ")' value='" + huga[j].name + "'>" cell3.innerHTML = "<input type='text' id='age" + j + "' onChange='ChangeText(" + (j*10+3) + ")' value='" + huga[j].age + "'>" }
によりテーブルへjsonデータ分だけ書き込みを行っております。
ここで、テーブルのセル内が編集可能となるようにinputタグを用いてjsonデータの書き込みを行っております。
■jsonデータをjsonファイルとして出力する
では次にjsonファイルを出力させてみたいと思います。
まずはhtmlです。
といってもこちらは、
<button type="button" onClick="WriteToFile()" >ファイル書き込み(json)</button>
をbody内に記載するのみです。
こちらはボタンタグでクリック時にWriteToFile関数がコールされる処理ですね。
そして、javascriptですがこちらのコードとなります。
function WriteToFile(){ let hugastring = JSON.stringify(huga); let blob = new Blob([hugastring],{type:"text/plan"}); let link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = '作ったファイル.json'; link.click(); }
まず、
let hugastring = JSON.stringify(huga);
でhugaデータを文字列データ(テキストデータ)に変換し、
let blob = new Blob([hugastring],{type:"text/plan"});
にて先ほどのテキストデータをオブジェクトに変換。
そして、
let link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = '作ったファイル.json'; link.click();
によってjsonファイルとしてダウンロードという形で出力させております。
■おまけ
先ほどのテーブルに対して追加したい場合にはこちらのようなコードをhtml、javascriptに追加すればOKです。
こちらのコードで先ほどのファイル出力を行うと追加したデータも合体して出力されます。
【html】
<label>タイプ:</label> <input type="text" id="type"> <br/> <label>名前:</label> <input type="text" id="name"> <br/> <label>年齢:</label> <input type="text" id="age"> <br/> <button type="button" onClick="ClickFunc()" >追加</button> <br/>
function ClickFunc(){ let type = document.getElementById('type').value; let name= document.getElementById('name').value; let age = document.getElementById('age').value; let data = {type:type, name:name, age:age} huga.push(data); var table = document.getElementById('table1'); var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "<input type='text' value='" + type + "'>" cell2.innerHTML = "<input type='text' value='" + name + "'>" cell3.innerHTML = "<input type='text' value='" + age + "'>" }
