バニラ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"
        }
    }
}