html+javascriptでxmlファイルをjsonデータへjsonデータをxmlファイルに変換
前回まででjsonファイルの読み込みやcsvファイルの読み込み、
csv⇔jsonデータの変換を行ってきました。
elsammit-beginnerblg.hatenablog.com
elsammit-beginnerblg.hatenablog.com
今回は最後で、xmlファイルを読み込みjsonデータに変換したり、jsonデータをxmlファイルに変換させてみたいと思います。
json⇔xmlの変換はこちらを用いれば簡単にできそうですが、、、
http://goessner.net/download/prj/jsonxml/
ライセンスがGPLでしたので、、あえて自分で作ることにしました！！
■前提について
今回の変換ですが、様々なパターンでの変換を考えていることもあり、
内部処理ではjsonデータにして扱うことにしました。
※理由はキーとvalueが分割して扱うことが出来るのでやりやすそうだったから。
このため、今回のコードも
csvファイルを一旦jsonデータに変換してからjsonファイルとして出力したり、
jsonファイルから読み出したjsonデータをcsvファイルとして出力したりしております。
また今回取り扱うデータについても、
{
"type":"man",
"name":"ニック",
"age":20
}といった形式とします。
また、xml形式ですが下記とします。
<?xml version="1.0" encoding="UTF-8"?>
<list>
<item>
<type>man</type>
<name>ニック</name>
<age>20</age>
</item>
<item>
<type>man</type>
<name>Bob</name>
<age>30</age>
</item>
<item>
<type>woman</type>
<name>Alice</name>
<age>12</age>
</item>
</list>
■xmlファイルからデータを読み出してjsonデータに変換
ではまずxmlファイルから読み出したデータからjsonデータに変換します。
xmlファイルからのデータ読み出しですが、jsonファイルの読み出しと同じコードで実現可能なため割愛します。
コードをチェックしたい方はこちらをご確認ください。
elsammit-beginnerblg.hatenablog.com
function xmlTojson(xmlArray){ let parser = new DOMParser(); let doc = parser.parseFromString(xmlArray, "application/xml"); let nl = doc.getElementsByTagName("item"); let matches = nl.length; let jsonData = []; for (let i = 0; i < matches; i++ ) { let e = nl.item(i); let youso = []; for(let j = 0;j < Math.floor(e.childNodes.length/2);j++){ let type = e.getElementsByTagName(e.childNodes[1+j*2].nodeName); youso.push(type); } let buf = {type:youso[0].item(0).textContent, japan:youso[1].item(0).textContent, us:youso[2].item(0).textContent}; jsonData.push(buf); } return jsonData; }
渡されたxmlファイルのデータをparseします。
let parser = new DOMParser(); let doc = parser.parseFromString(xmlArray, "application/xml");
parseされたデータからitemタグを抽出します。
let nl = doc.getElementsByTagName("item");
そして、itemタグ配下のtype、name、ageを取得しjsonData配列に逐次追加。
let jsonData = []; for (let i = 0; i < matches; i++ ) { let e = nl.item(i); let youso = []; for(let j = 0;j < Math.floor(e.childNodes.length/2);j++){ let type = e.getElementsByTagName(e.childNodes[1+j*2].nodeName); youso.push(type); } let buf = {type:youso[0].item(0).textContent, name:youso[1].item(0).textContent, age:youso[2].item(0).textContent}; jsonData.push(buf); }
youso配列にノードの要素を次々に格納していきます。
childNodesにはノードの要素名とテキストが順番に格納されているため、
1つ飛ばしで要素を取得していっております。
e.childNodes[1+j*2].nodeName
最後に要素名毎のデータを、getElementsByTagName関数で取得しています。
getElementsByTagName関数やchildNodes関数については下記をご覧ください。
https://developer.mozilla.org/ja/docs/Web/API/Node/childNodes
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
■jsonデータをxmlファイルに変換・出力
では次にjsonデータをxmlファイルに変換・出力してみます。
コードはこちら。
function WriteXmlFile(){ let writeString = ""; let bom = new Uint8Array([0xEF, 0xBB, 0xBF]); writeString += '<?xml version="1.0" encoding="UTF-8"?> \n'; writeString += '<list> \n'; for(let i = 0; i < huga.length; i++){ writeString += ' <item> \n'; writeString += ' <type>' + huga[i].type + '</type> \n'; writeString += ' <name>' + huga[i].name+ '</name> \n'; writeString += ' <age>' + huga[i].age+ '</age> \n'; writeString += ' </item> \n'; } writeString += '</list> \n'; let blob = new Blob([bom, writeString],{type:"application/xml"}); let link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = '作ったファイル.xml'; link.click(); }
こちらは結構単純です。
jsonデータを分割して文字列として次々に追加してくのみです！！
最後に、
let blob = new Blob([bom, writeString],{type:"application/xml"}); let link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = '作ったファイル.xml'; link.click();
により変換した文字列をxmlファイルに書き込みダウンロード処理を実行して完了になります。
