勉強したことのメモ

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

  関連記事

Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法

Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...

Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法

Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...