バニラ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のbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
JavaScriptで三項演算子の中に三項演算子
既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...
-
-
日本地図のクリッカブルマップをjQueryで実装する方法(japan-map)
JavaScriptもしくはjQueryで日本地図を表示し、都道府県や八地方区分 ...
-
-
JavaScriptにてHTML文字列をDOMノードに変換する方法
先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...
-
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...