CODEWITHSUNDEEP
javascripthtmlxml
Bashabi
Bashabi

Reputation: 706

Displaying content of xml data in html file is not working

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

enter image description here

Upvotes: 2

Views: 2348

Answers (1)

Rich N
Rich N

Reputation: 9475

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.

Upvotes: 1

Related Questions