All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Retrieve Data From XML File Using JavaScript

Last Updated : Mar 11, 2024

How To Retrieve Data From XML File Using JavaScript

In this article we will show you the solution of how to retrieve data from xml file using JavaScript, extensible Markup Language (XML) is a W3C recommendation used in data exchange and data communication to store or transport data.

In XML, the marks are not limited or predefined like in HTML.

In an HTML page, if we have an XML file, we can retrieve the local file using two different methods by using fetch () API method and by using XMLHttpRequest()

Step By Step Guide On How To Retrieve Data From XML File Using JavaScript :-

To retrieve data from XML file, we must first create an XML file.

<?xml version="1.0" encoding="UTF-8"?>
<company>
    <employee?>
        <name> peter </name>
        <age> 24 </age>
        <gender> male </gender>
    </employee>
</company>
</xml>

Method 1

In this method, we are going to use the fetch() method.

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> how to retrieve data from XML file using JavaScript </title>
    <style>
        body {
            font-family : 'Lucida Sans', Verdana , sans-serif ;
        }
        h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : rgb(113, 221, 113) ;
         text-align : center ;
        }
        h3 {
            text-align : center ;
        }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <h3> how to retrieve data from XML file using JavaScript </h3>
        <script>
            fetch('emp.xml') //fetch API returns a promise
                .then (function(resp){
                    return resp.text() ;
                })
                .then(function(data) {
                    let parser = new DOMParser() ,
                      xmlDoc = parser.parseFromString(data, 'text/xml') ;
                      console.log (xmlDoc.getElementsByTagName('name')) ;
                }) ;
        </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Created the <style> tag to add CSS to the HTML page.
  8. to add JavaScript Create a <script> tag.
  9. Using the fetch() API , which returns a promise
  10. Using .then () , the promise API return a resp.text.
  11. Calling the function(data), to create a new DOMparser()
  12. Now using parseFromString() to parse a string containing XML
  13. Using console.log() to display it.

Method 2

In the method, we are going to use the XMLHttpRequest() to retrieve an XML file.

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> how to retrieve data from XML file using JavaScript </title>
    <style>
        body {
            font-family : 'Lucida Sans', Verdana , sans-serif ;
        }
        h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : rgb(113, 221, 113) ;
         text-align : center ;
        }
        h3 {
            text-align : center ;
        }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <h3> how to retrieve data from XML file using JavaScript </h3>
    <button onclick="readXML()"> Click!! </button>
        <script>
            function readXML() {
                var xml = new XMLHttpRequest() ;
                xml.open('GET', 'emp.xml' , false) ;
                xml.send() ;
                var xmlData = xml.responseXML ;
                if(!xmlData) {
                    xmlData = (new DOMParser()).parseFromString(xml.responseText,'text/xml') ;
                    var emp = xmlData.getElementsByTagName("employee") ;
                    var name = emp[0].getElementsByTagName("name")[0].firstChild.data ;
                    var age = emp[0].getElementsByTagName("age")[0].firstChild.data ;
                    var gender = emp[0].getElementsByTagName("gender")[0].firstChild.data ;
                    document.write("name: " + name) ;
                    document.write("age: " + age) ;
                    document.write("gender: " + gender) ;
                }
            }
        </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Create a <button> with onclick a function ‘readXML’
  8. Created the <style> tag to add CSS to the HTML page.
  9. To add JavaScript Create a <script> tag.
  10. Now create the function readXML()
  11. Create a variable ‘xml’ then add a new XMLhttpRequest() within it
  12. Use the .open() method to get the URL and specs.
  13. Using the .send() method.
  14. Create a var ‘xmlData’ to add .responeXML.
  15. Into an ‘if’ statement creates a new DOMparser() and parseFromString() to parse a string containing XML
  16. Create variables as per the XML file and use getElementByTagName() and using document.write() to display it.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know how to retrieve data from xml file using JavaScript.

I hope this article on how to retrieve data from xml file using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪