JavaScriptのFetchAPIを使い、XMLを読み込みたい。fetchを使う場合、JSONやテキストを読み込むことが多いと思いますが、XMLを読み込み処理する場合はDOMParserでパースすると良いみたいです。

<?xml version="1.0" encoding="UTF-8"?>
<pokemon>
 <item>
  <name>ゼラオラ</name>
  <type>でんき</type>
 </item>
 <item>
  <name>ルカリオ</name>
  <type>かくとう/はがね</type>
 </item>
 <item>
  <name>リザードン</name>
  <type>ほのお/ひこう</type>
 </item>
 <item>
  <name>ザングース</name>
  <type>ノーマル</type>
 </item>
</pokemon>

上記のようなXMLファイルがあったとします。以下のスクリプトでXMLを読み込み解析します。

const getURL = 'sample.xml';
const parser = new DOMParser();
const xmlLoad = async () => {
 const res = await fetch(getURL,{'mode':'cors'})
 .then((r) => r.text())
 .then((d) => {
  const xml = parser.parseFromString(d,'text/xml');
  const item = xml.querySelectorAll('item');
  item.forEach((el) => {
   console.log(el.querySelector('name').textContent);
  });
 });
};
xmlLoad();

実行結果。

ゼラオラ
ルカリオ
リザードン
ザングース

もちろん、HTML側に出力して表示させることも可能です。

<ul id="list"></ul>

const list = document.getElementById('list');
/*〜中略〜*/
item.forEach((el) => {
 list.insertAdjacentHTML('beforeend',`<li>${el.querySelector('title').textContent}</li>`);
});

なお、Webブラウザから外部ドメインに通信する場合は配信側がCORSに対応している必要があります。対応していない場合はクロスオリジン制約によってエラーとなるので注意が必要です。

Access to fetch at '{リクエスト先}' from origin '{リクエスト元}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

上記はエラーの例。

おしまい♥

タグ：XML