勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptでXML形式データの取り扱いとJSON形式への変換方法

  JavaScript

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

  関連記事

formのpasswordとtextをjQueryで切り替える方法

formでtype="password"を指定していると内容を入力した際に「●● ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

iPhoneにホーム画面登録を促すダイアログを表示

スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれど ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...