Berikut cara membaca file XML dengan menggunakan javascript :

HTML :

<button type="button" onclick="loadXMLText()">Get XML Text</button>
<p id="demo1"></p>
<button type="button" onclick="loadXMLAttr()">Get XML Attribute</button>
<p id="demo2"></p>

Javascript :

function loadXMLText() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  }
  xmlhttp.open("GET", "../assets/source/SC_1_A/tilemapresource.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("SRS");
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue + "<br>";
  }
  document.getElementById("demo1").innerHTML = txt;
}

function loadXMLAttr() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction2(this);
    }
  };
  xmlhttp.open("GET", "../assets/source/SC_1_A/tilemapresource.xml", true);
  xmlhttp.send();
}

function myFunction2(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("Origin");
  for (i = 0; i < x.length; i++) {
      txt += "x = " + x[i].getAttribute('x') + " and y = " + x[i].getAttribute('y');
  }

  document.getElementById("demo2").innerHTML = txt;

}

Terima kasih. Selamat Mencoba

Kenapa Membaca File XML di JavaScript?

XML (eXtensible Markup Language) masih banyak digunakan untuk pertukaran data antar sistem, terutama dalam integrasi aplikasi enterprise, konfigurasi sistem, dan API lama. Kemampuan membaca dan mem-parsing file XML di JavaScript sangat penting untuk pengembangan web yang berinteraksi dengan layanan berbasis XML.

Menggunakan DOMParser

Cara paling umum untuk membaca file XML di JavaScript adalah dengan menggunakan DOMParser. Berikut contoh lengkapnya:

// Membuat instance DOMParser
const parser = new DOMParser();

// String XML yang akan diparse
const xmlString = `<?xml version="1.0"?>
<data>
  <item>
    <name>Produk A</name>
    <price>50000</price>
  </item>
  <item>
    <name>Produk B</name>
    <price>75000</price>
  </item>
</data>`;

// Parse string menjadi DOM document
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Mengakses elemen
const items = xmlDoc.getElementsByTagName("item");
for (let i = 0; i < items.length; i++) {
  const name = items[i].getElementsByTagName("name")[0].textContent;
  const price = items[i].getElementsByTagName("price")[0].textContent;
  console.log(`${name}: Rp ${price}`);
}

Membaca File XML dari Server

Untuk membaca file XML dari server, kamu bisa menggunakan fetch API atau XMLHttpRequest:

// Menggunakan Fetch API
fetch('data.xml')
  .then(response => response.text())
  .then(xmlString => {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlString, "text/xml");
    // Proses data XML di sini
    console.log(xmlDoc.documentElement.nodeName);
  })
  .catch(error => console.error('Error:', error));

Menangani Error Parsing

Saat mem-parse XML, selalu tangani kemungkinan error:

const xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Cek apakah ada error parsing
const parseError = xmlDoc.getElementsByTagName("parsererror");
if (parseError.length > 0) {
  console.error("XML parsing error:", parseError[0].textContent);
} else {
  // Lanjutkan proses data
}

Tips dan Best Practices

• Gunakan DOMParser - Hindari menggunakan eval() atau innerHTML untuk memproses XML karena alasan keamanan
• Validasi XML - Selalu periksa apakah XML berhasil di-parse sebelum mengakses elemennya
• Gunakan XPath - Untuk query kompleks, gunakan XPath untuk navigasi elemen XML yang lebih efisien
• Pertimbangkan JSON - Jika memungkinkan, konversi XML ke JSON untuk memudahkan manipulasi data di JavaScript

Kesimpulan

Membaca file XML di JavaScript dapat dilakukan dengan mudah menggunakan DOMParser. Dengan pemahaman yang baik tentang struktur XML dan API yang tersedia, kamu dapat mengintegrasikan data XML ke dalam aplikasi web dengan efisien dan aman.