バニラ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" } } }
関連記事
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法
サーバ内のCSVファイルを読み込み、そのデータをサイト上で取り扱いたい。通常だと ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...