バニラJavaScriptでXML形式データの取り扱いとJSON形式への変換方法
JavaScriptで外部APIにリクエストし、レスポンスのXML形式データを取り扱いたい。また、XML形式のデータをJSON形式に変換したい。以下に対応方法をメモ。
使用するAPI
以下の郵便番号による住所検索APIを使用する。
https://geoapi.heartrails.com/api.html#postal
対応方法
XML形式データの取り扱い
<script> const url = 'https://geoapi.heartrails.com/api/xml?method=searchByPostal&postal=1050003'; const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.responseType = "document"; xhr.onload = () => { if( xhr.status == 200 ){ const xml = xhr.response; console.log(xml.querySelector('postal').textContent); //1050003 console.log(xml.querySelector('prefecture').textContent); //東京都 console.log(xml.querySelector('city').textContent); //港区 console.log(xml.querySelector('town').textContent); //西新橋 }else{ console.log(`Error`); } }; </script>
JSON形式への変換
ライブラリの用意
以下のxml2json.jsをダウンロードし適当なディレクトリにアップロードする。
https://goessner.net/download/prj/jsonxml/
ソースコード
<script src="/path/to/xml2json.js"></script> <script> const url = 'https://geoapi.heartrails.com/api/xml?method=searchByPostal&postal=1050003'; const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.responseType = "document"; xhr.onload = () => { if( xhr.status == 200 ){ const xml = xhr.response; const json = xml2json(xml,''); console.log(json); }else{ console.log(`Error`); } }; </script>
出力結果
{ "response": { "location": { "city": "港区", "city-kana": "みなとく", "town": "西新橋", "town-kana": "にししんばし", "x": { "@type": "decimal", "#text": "139.75198" }, "y": { "@type": "decimal", "#text": "35.666286" }, "prefecture": "東京都", "postal": "1050003" } } }
関連記事
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...
-
-
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...
-
-
JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法
フォームのテキストボックスにカラーコードのピッカーを実装したかった。HTMLのみ ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...