勉強したことのメモ

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

  関連記事

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...

パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法

アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...

CKEditor(WYSIWYGエディタ)の設置方法と日本語化

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...