勉強したことのメモ

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

  関連記事

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...

Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...