Read XML file and print the details as tabular data by using JavaScript

27 Jul, 2021
Introduction:To read the XML file and print the details of an XML file in a Tabular form by using javaScript. We need to create an XML file which data we want to print. XML stands for Extensible Markup Language · It is a markup language much similar to HTML.The main purpose of the XML file for designed to store and transport the data. Creating an XML file is very simple because it uses custom tags.
Prerequisites:
Basic Knowledge HTML
Basic Knowledge CSS
Basic Knowledge JavaScript
Knowledge XML
Approach: After creating the XML file, we will write JavaScript to read and extract data from the file in tabular form. So, we will send the XMLHttpRequest to the server and fetch the details from the XML file by using JavaScript. If the request is finished then the response is ready and Status is “OK” so, we get the XML data by the use of Tag Name.
Now we will create two files:
1.employee.xml: A xml file that stores the employee’s details.To create an xml file we use custom tags, here we use different custom tags like the first name, last name, title, division, etc. which store the details of every employee according to the tag name.
employee.xml
<?xml version="1.0" encoding="utf-8"?><employees>    <employee id="be129">        <firstname>Jitendra</firstname>        <lastname>Kumar</lastname>        <title>Engineer</title>        <division>Materials</division>        <building>327</building>        <room>19</room>    </employee>    <employee id="be130">        <firstname>Amit</firstname>        <lastname>Kumar</lastname>        <title>Accountant</title>        <division>Accts Payable</division>        <building>326</building>        <room>14</room>    </employee>    <employee id="be131">        <firstname>Akash</firstname>        <lastname>Kumar</lastname>        <title>Engineering Manager</title>        <division>Materials</division>        <building>327</building>        <room>21</room>    </employee>    <employee id="be132">        <firstname>Aishwarya</firstname>        <lastname>Kulshrestha</lastname>        <title>Engineer</title>        <division>Materials</division>        <building>327</building>        <room>22</room>    </employee>    <employee id="be133">        <firstname>Sachin</firstname>        <lastname>Kumar</lastname>        <title>Engineer</title>        <division>Materials</division>        <building>327</building>        <room>24</room>    </employee>    <employee id="be135">        <firstname>Vikash</firstname>        <lastname>kumar</lastname>        <title>COO</title>        <division>Management</division>        <building>216</building>        <room>26</room>    </employee>    <employee id="be136">        <firstname>Suvam</firstname>        <lastname>Basak</lastname>        <title>Accountant</title>        <division>Accts Payable</division>        <building>326</building>        <room>30</room>    </employee>    <employee id="be135">        <firstname>Abhinav</firstname>        <lastname>kumar</lastname>        <title>COO</title>        <division>Management</division>        <building>216</building>        <room>32</room>    </employee>     <employee id="be131">        <firstname>DhanPal</firstname>        <lastname>Singh</lastname>        <title>Engineering Manager</title>        <division>Materials</division>        <building>327</building>        <room>21</room>    </employee>  </employees>
2.index.html: This file contains the HTML, CSS and JavaScript code. We use the style tag for the CSS part in which we are styling the table attribute and button after that we use the script tag in which we write the JavaScript code and insert the employee.xml file. In the loadXMLDoc( ) function we send the HTTP request to the server when the request is finished then we get the response from the server and access the data from an XML file. In empDetails( ) function if we get the response from the server then we fetch the XML file data one by one by using the custom tag name. To display the data of this xml file we simply click on the Get Employees details button and the xml file data will be displayed on your screen in tabular form.
index.html
<!DOCTYPE html>  <head>    <title>Reads the XML data using JavaScript</title>      <!-- CSS -->    <style>        table {            border-collapse: collapse;            width: 100%;        }          th,        td {            text-align: left;            padding: 8px;        }          tr:nth-child(even) {            background-color: #7ce2af        }          th {            background-color: #7c0f65;            color: white;        }          .button {            position: relative;            text-align: center;            padding: 20px;            border: 4px solid rgb(55, 12, 211);            background: rgba(20, 192, 4, 0.5);            color: rgb(230, 36, 78);            outline: none;            border-radius: 30px;            font-size: 30px;            width: 500px;          }          .button:hover {            color: black;            background: white;        }    </style>      <!--JavaScript-->    <script>        function loadXMLDoc() {            var xmlhttp = new XMLHttpRequest();            xmlhttp.onreadystatechange = function () {                  // Request finished and response                 // is ready and Status is "OK"                if (this.readyState == 4 && this.status == 200) {                    empDetails(this);                }            };              // employee.xml is the external xml file            xmlhttp.open("GET", "employee.xml", true);            xmlhttp.send();        }          function empDetails(xml) {            var i;            var xmlDoc = xml.responseXML;            var table =                `<tr><th>Firstname</th><th>Lastname</th>                    <th>Title</th><th>Division</th>                    <th>Building</th><th>Room</th>                </tr>`;            var x = xmlDoc.getElementsByTagName("employee");              // Start to fetch the data by using TagName             for (i = 0; i < x.length; i++) {                table += "<tr><td>" +                    x[i].getElementsByTagName("firstname")[0]                    .childNodes[0].nodeValue + "</td><td>" +                    x[i].getElementsByTagName("lastname")[0]                    .childNodes[0].nodeValue + "</td><td>" +                    x[i].getElementsByTagName("title")[0]                    .childNodes[0].nodeValue + "</td><td>" +                    x[i].getElementsByTagName("division")[0]                    .childNodes[0].nodeValue + "</td><td>" +                    x[i].getElementsByTagName("building")[0]                    .childNodes[0].nodeValue + "</td><td>" +                    x[i].getElementsByTagName("room")[0]                    .childNodes[0].nodeValue + "</td></tr>";            }              // Print the xml data in table form            document.getElementById("id").innerHTML = table;        }    </script></head>  <body>    <center>        <button type="button" class="button"             onclick="loadXMLDoc()">            Get Employees Details        </button>    </center>          <br><br>    <table id="id"></table></body>  </html>
Steps to run the application:To read the XML data we need to run this code on the local server So, first we start the local server and after it opens the chrome browser, start the local host and see the results.  After clicking on the getting Employees Details button, we will get the Employees Details in a tabular form.
Output:
CSS-Properties
CSS-Questions
HTML and XML
HTML-Questions
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS