Get XML data from File using JavaScript async/await

Last Updated: 15th October 2025

If you're learning JavaScript and want to work with external data, understanding how to extract XML is a great place to start. In a previous tutorial, I explained how to read XML files using XMLHttpRequest. In this post, you'll learn a modern approach: using async/await to fetch XML data and display it as an HTML table.

JavaScript's async/await syntax makes it easier to handle asynchronous tasks like fetching XML or JSON from remote files. It's beginner friendly, clean, and widely used in real-world applications.

Let's dive into how to read XML data using async/await and render it into a structured HTML table.

What Is XML and Why Use It?

XML (eXtensible Markup Language) is a widely used format for storing and transporting structured data. Its tag-based structure makes it easy to understand and organize information. For example:

<List>
  <BookName>Asp.Net Core 3</BookName>
  <Category>Programming</Category>
</List>

So, here's the xml file from where the script will extract data for the table.

The Markup

In the HTML markup section, we'll add a few basic elements to serve as placeholders for displaying the XML data. We'll also apply some CSS styling to enhance the appearance of the table. Although the table itself will be generated dynamically using JavaScript, these initial elements and styles help structure and present the data cleanly.

<!DOCTYPE html>
<html>
<head>
  <style>
    th, td, p, input {
      font-size: 18px;
    }

    table, th, td {
      border: solid 1px #ddd;
      border-collapse: collapse;
      padding: 2px 3px;
      text-align: center;
    }
    th {
      font-weight:bold;
    }
  </style>
</head>
<body>
  <input type='button' onclick='get_data()'  value='Create Table using XML Data' />
  <p id='showData'></p>
</body>
</html>

The Script

<script>
  //   using async and await to fetch xml data.
  let get_data = async() => {
    let url = "../../library/library.xml";		// the XML file.
    
    let response = await fetch (url);
    const xmlData = await response.text().then(( str ) => {
        return new DOMParser().parseFromString(str, 'application/xml');
    });
   
    createTable(xmlData);	// convert data to table.
  }  
  
  let createTable = (xml) => {
    // the xml tag name
    let ucBooks = xml.getElementsByTagName('List');
    let arr = [];
    
    for (let i = 0; i < ucBooks.length; i++) 
    {
      // Push XML attributes into the array.
      arr.push({
        Code: ucBooks[i].getElementsByTagName('code'),
        Name: ucBooks[i].getElementsByTagName('BookName'),
        Category: ucBooks[i].getElementsByTagName('Category'),
        Price: ucBooks[i].getElementsByTagName('Price')
      });
    }
    
    let col = [];
    for (let i = 0; i < arr.length; i++) {
      for (let key in arr[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

    // Create a table.
    const table = document.createElement("table");

    // Create table header row using the extracted headers above.
    let tr = table.insertRow(-1);                 // table row.

    for (let i = 0; i < col.length; i++) {
      let th = document.createElement('th');      // table header.
      th.innerHTML = col[i];
      tr.appendChild(th);
    }

    // add data to the table as rows.
    for (let i = 0; i < arr.length; i++) {

      tr = table.insertRow(-1);

      for (let j = 0; j < col.length; j++) {
        let tabCell = tr.insertCell(-1);
        tabCell.innerHTML = arr[i][col[j]][0].childNodes[0].nodeValue;
      }
    }
    
    // Now, add the newly created table to a container.
    const result = document.getElementById('showData');
    result.innerHTML = "";
    result.appendChild(table);
  }
</script>

Try it

The method is very simple. If you are new to async and await, then please see this post.

Why Choose the Fetch API?

The Fetch API is a modern alternative to XMLHttpRequest. It uses promises, making it easier to write clean, readable asynchronous code. Key benefits include:

1) Simpler syntax
2) Better error handling
3) Native support for async/await
4) More readable and maintainable code

Also, take note of how the XML data is parsed and stored in a JavaScript array. This allows you to easily access and manipulate the data later, whether for rendering, filtering, or further processing.

Conclusion

Using the Fetch API to read XML in JavaScript is a clean and efficient approach for modern web development. It simplifies asynchronous requests and integrates seamlessly with newer JavaScript features. Whether you're building dashboards, product listings, or configuration tools, this method helps you work with XML data in a more maintainable way.

← PreviousNext →