Displaying content of xml data in html file is not working

Question

I want to display the content of a XML file into a html file.

I have seen and tried the example shown in the following link

https://www.youtube.com/watch?v=VxKGVb0oOBw

I have created html file copying the exactly the code in that example. Here is the code of my first html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=""UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test 1oading xml</title>
</head>
<body>
<div id='content'>
    <table id="books" cellpadding="10px" style="text-align:left;">
        <thead>
            <tr><th>Author</th><th>Title</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script>
    let xmlContent = '';
    let tableBooks = document.getElementById('books');
    fetch('books.xml').then((response)=>{
        response.text().then((xml)=>{

            xmlContent = xml;
            let parser = new DOMParser();
            let xmlDOM = parser.parseFromString(xmlContent, 'appliction/xml');
            let books = xmlDOM.querySelectorAll('book');

            books.forEach(bookXmlNode => { 
                let row = document.createElement('tr');

                //author
                let td = document.createElement('td');
                td.innerText = bookXmlNode.children[0].innerHTML;
                row.appendChild(td);

                //title
                let td = document.createElement('td');
                td.innerText = bookXmlNode.children[1].innerHTML;
                row.appendChild(td);        

                tableBooks.children[1].appendChild(row);

            });
        });
    });
</script>
</body>
</html>

copied the xml file content from here https://learn.microsoft.com/en-us/previous-versions/windows/desktop/ms762271(v%3Dvs.85) .. saved the file as books.xml in the same folder of the html file. Although Ideally I want to display data from external xml file so that the data can be updated dynamically.

When I open the html file it is not showing the xml data.

I have also tried with the code from this link.

https://www.encodedna.com/2014/07/extract-data-from-an-xml-file-using-javascript.htm

Thant is also not working.

How to display data of an (external) xml file into a html file

Screenshot of inspect page. The top one for the code of the you tube video.

The botom one is for the code from https://www.encodedna.com/2014/07/extract-data-from-an-xml-file-using-javascript.htm

You can't define a variable that is already defined with `let`and you have `let td = ...` twice in the same context. — Triby, Jan 10 '20 at 16:08
@full-stack : I corrected is with id . still its not displaying data — Bashabi, Jan 10 '20 at 16:10
@RiteshKhandekar : I tried with webserver. Still the same result — Bashabi, Jan 10 '20 at 16:22

Rich N · Accepted Answer · 2020-01-10T16:38:30.893

Your code is basically correct but you have a few typos. Try the code below, which works for me. As other commenters have mentioned, you can't just open the file, you need a web server to serve it up. The video you link to does this using Live Server in Visual Studio Code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="" UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test 1oading xml</title>
</head>
<body>
    <div id='content'>
        <table id="books" cellpadding="10px" style="text-align:left;">
            <thead>
                <tr>
                    <th>Author</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script>
        let xmlContent = '';
        let tableBooks = document.getElementById('books');
        fetch('books.xml').then((response) => {
            response.text().then((xml) => {
                xmlContent = xml;
                let parser = new DOMParser();
                let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');
                let books = xmlDOM.querySelectorAll('book');

                books.forEach(bookXmlNode => {
                    let row = document.createElement('tr');

                    //author
                    let td = document.createElement('td');
                    td.innerText = bookXmlNode.children[0].innerHTML;
                    row.appendChild(td);

                    //title
                    let td2 = document.createElement('td');
                    td2.innerText = bookXmlNode.children[1].innerHTML;
                    row.appendChild(td2);

                    tableBooks.children[1].appendChild(row);

                });
            });
        });
    </script>
</body>
</html>

The typos are: id="books", 'application/xml' and you can't use td as a variable name twice.

By the way, when you have problems like this the first place to look is in the browser's console window. Hit F12 after the browser has launched and failed to show your data, and go to Console if it's not selected: it will show you any errors and where they are coming from. If you're using VS Code you can actually debug the script as well I think, meaning you can single-step through it seeing what's going on.

Thank you. That works... but my code when I run with web server also does not work. I have one question. Will it work with external xml file? — Bashabi, Jan 10 '20 at 16:36
It will work with an external xml file in the same folder as the html file, yes. I made a list of the changes to your code I made as an edit above: refresh the page and try changing your code in the same way. That should fix it. — Rich N, Jan 10 '20 at 16:40
Hello, sorry to bother you again. I cannot display the content from remote link. When I go to the console I am getting the error of " no 'access-control-allow-origin' header is present on the requested resource html " error — Bashabi, Jan 15 '20 at 09:50
That's because getting data from a remote link is deliberately difficult for security reasons. To get around it you need a thing called 'Cross Origin Resource Sharing' (CORS), and there's plenty of information on that on the internet. E.g. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS. In the end for something like this it may be easier to just copy the XML file to the same location as the HTML file. More info on workarounds: https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-get-a-no-access-control-allow-origin-header-is-pr — Rich N, Jan 15 '20 at 14:18

Displaying content of xml data in html file is not working

1 Answers1