What is the correct way to read an XML file using JavaScript, and how can I extract values from each "marker" element?

General Discussions
,
1

I have an XML file structured like this:

<markers>
   <marker>
      <type></type>
      <title></title>
      <address></address>
      <latitude></latitude>
      <longitude></longitude>
   </marker>
   <marker>
      <type></type>
      <title></title>
      <address></address>
      <latitude></latitude>
      <longitude></longitude>
   </marker>
</markers>

How can I use JavaScript to read XML and loop through all the <marker> elements to get the values of their child elements like <type>, <title>, etc.?

2

This one’s been around forever and works well if you’re loading an XML file from the same domain. It is simple and doesn’t require modern features—great for legacy support.

var xhr = new XMLHttpRequest();
xhr.open("GET", "markers.xml", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var xmlDoc = xhr.responseXML;
        var markers = xmlDoc.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
            var type = markers[i].getElementsByTagName("type")[0].textContent;
            var title = markers[i].getElementsByTagName("title")[0].textContent;
            var address = markers[i].getElementsByTagName("address")[0].textContent;
            console.log(type, title, address);
        }
    }
};
xhr.send();
3

If you’re working in a modern browser environment, this is a clean and promise-based way to do it:

fetch('markers.xml')
  .then(response => response.text())
  .then(str => {
    const parser = new DOMParser();
    const xml = parser.parseFromString(str, "application/xml");
    const markers = xml.getElementsByTagName("marker");

    for (let i = 0; i < markers.length; i++) {
      const type = markers[i].getElementsByTagName("type")[0].textContent;
      const title = markers[i].getElementsByTagName("title")[0].textContent;
      const address = markers[i].getElementsByTagName("address")[0].textContent;
      console.log(type, title, address);
    }
  });
4

Let’s say you already have the XML content as a string (maybe coming from an API or just for testing).

Here’s how you’d handle that:

const xmlString = `
<markers>
   <marker>
      <type>Restaurant</type>
      <title>Pizza Place</title>
      <address>Main St</address>
      <latitude>45.123</latitude>
      <longitude>-93.456</longitude>
   </marker>
</markers>`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const markers = xmlDoc.getElementsByTagName("marker");

for (let i = 0; i < markers.length; i++) {
  const type = markers[i].getElementsByTagName("type")[0].textContent;
  const title = markers[i].getElementsByTagName("title")[0].textContent;
  const address = markers[i].getElementsByTagName("address")[0].textContent;
  console.log(type, title, address);
}