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

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: