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

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 with the data we want to print. XML stands for Extensible Markup Language· It is a markup language very similar to HTML. The main purpose of the XML file is 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 the 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() {
            let 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) {
            let i;
            let xmlDoc = xml.responseXML;
            let table =
                `<tr><th>Firstname</th><th>Lastname</th>
                    <th>Title</th><th>Division</th>
                    <th>Building</th><th>Room</th>
                </tr>`;
            let 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>

Output:

Output