バニラ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" } } }
関連記事
-
-
バニラJavaScriptにてfetch APIを用いてHTTPリクエストを行う方法
あるサイトのソースコードを拝見しているとバニラJavaScriptにて他ページの ...
-
-
JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置や ...
-
-
Internet ExplorerでJavaScript関数の初期値について
あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどI ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
javascriptのtry文
javascriptとかjQueryを使ってて、Firefox,chromeはい ...