バニラ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で配列の中から最大・最小値を取得する方法
JavaScriptで配列の中から最大・最小値を取得したかった。以下に対応方法を ...
-
-
jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...