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

Last Updated : 30 Sep, 2024

Reading an XML file and printing its details as tabular data using JavaScript involves parsing the XML content, extracting relevant data, and then displaying it in a structured table format. This can be done by manipulating the Document Object Model (DOM) and creating HTML tables dynamically in the browser.

Prerequisites

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 includes HTML, CSS, and JavaScript. Using `loadXMLDoc()`, an HTTP request retrieves the XML file. The empDetails() function processes the response, extracting and displaying employee details in a table format when the "Get Employees details" button is clicked.

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>