Click here to Skip to main content
15,353,970 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
I would like to display a XML tree structure as it is in the HTML page.
XML:
XML
<employees>
            <employee id="1">
                <firstName>OneFirstName</firstName>
                <lastname>OneSecondName</lastname>
            </employee>
            <employee id="2">
                <firstname>TwoFirstName</firstname>
                <lastname>TwoSecondName</lastname>
            </employee>
        </employees>


The string version of XML comes from a WCF service and rendered using the Angular binding such as below.
{{MyObj.XMLText}}


Few things I have tried and didn't work for me. May I am missing something and looking for the missing link.

http://tiku.io/questions/2496035/how-to-display-xml-data-in-div[^]

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_23513630.html[^]

http://stackoverflow.com/questions/10498188/how-to-display-xml-data-in-div[^]

The above links suggest two approaches displaying the XML:
1- HTML conversion using htmlEntities(...) which replaces characters such as <, > to their HTML version. Tried this and it shows XML, however indentation and spacing is lost. Everything comes in a line and not formatted as XML.
2. HTML conversion using vkbeautify.js library. Tried this and it gives proper formatting in the alert dialog. However, in the main page only XML tag values are displayed in a continuous fashion. Here indentation is lost.

Please find below the code. I have used simple notepad to create it.
NOTE: download vkbeautify.0.99.00.beta.js from
https://code.google.com/p/vkbeautify/downloads/list[^]

Code: index.html

XML
<html>
    <title>
        <h1> HTML Javascript page </h1>
    </title>
    <head>
        <script type="text/javascript" src="vkbeautify.0.99.00.beta.js"></script>
    </head>
    <body>
         <h1>Employees</h1>
        <button type="button" onclick="displayXml()">Display Employee xml.</button>
        <hr/>
        <p id="empDetails"></p>
        <script>
            var xmlString = "<employees>";
            xmlString = xmlString +"    <employee id='1'>";
            xmlString = xmlString +"        <firstName>OneFirstName</firstName>";
            xmlString = xmlString +"        <lastname>OneSecondName</lastname>";
            xmlString = xmlString +"    </employee>";
            xmlString = xmlString +"    <employee id='2'>";
            xmlString = xmlString +"        <firstname>TwoFirstName</firstname>";
            xmlString = xmlString +"        <lastname>TwoSecondName</lastname>";
            xmlString = xmlString +"    </employee>";
            xmlString = xmlString +"</employees>";

            function displayXml() {
                document.getElementById('empDetails').innerHTML = xmlString;
            };

            function htmlEntities(str) {
                    var htmlString = String(str).replace(/&/g, '&amp;').replace(/</g,     '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                    return htmlString;
            }

            function displayXml() {
                        // Normal display of xml
                        document.getElementById('empDetails').innerHTML = xmlString;
                        alert("Normal display: \n" + xmlString);

                        // HTML conversion only
                        var htmlString = htmlEntities(xmlString);
                        document.getElementById('empDetails').innerHTML = htmlString;
                        alert("HTML formatted display: \n" + htmlString);

                        // Using vkbeautify
                        var beautifyHtmlString = vkbeautify.xml(xmlString);
                        document.getElementById('empDetails').innerHTML = beautifyHtmlString;
                        alert("VKbeautify display: \n" + beautifyHtmlString);
                    };
        </script>
    </body>
</html>



Thanks in advance!!!
Posted
Updated 22-Aug-17 19:27pm
v2
Comments
   
"Didn't work" is not informative. It's not clear how exactly you want to display it, but I don't see any problems.
What have you tried so far?
—SA
Praveen Raghuvanshi 8-Jun-15 4:39am
   
Updated the question!!!
   
Does it mean that you simply needed to display the XML text? And the text is hard-coded?
And what's the problem?
—SA
Praveen Raghuvanshi 8-Jun-15 13:50pm
   
Yes I need to display the XML text as it is and it comes as a string from a web service. Just for representation, I have hard coded it.
However, using <pre lang="xml"></pre> worked for me.
   
Thank you for the clarification. That's all right. Just escape HTML markup (use &gt; for >, and so on) and use <pre>.
—SA
Mohibur Rashid 7-Jun-15 20:21pm
   
You posted a bunch of link saying 'didn't work'. May be you should show us your work instead of other peoples work that didn't work
Praveen Raghuvanshi 8-Jun-15 4:39am
   
Updated the question!!!
Praveen Raghuvanshi 8-Jun-15 4:31am
   
[Code removed — SA]

   
Comments
Praveen Raghuvanshi 9-Jun-15 0:27am
   
Thanks for sharing above links!
It worked for me by encapsulating the XML string in a
HTML
<pre lang="xml">{{xmlString}}</pre>
where xmlString is the string representation of the XML.
   
v2
Use a
HTML
<pre lang="xml">{{xmlString}}
tag, then use
JavaScript
var beautifyHtmlString = vkbeautify.xml(xmlString);
                        document.getElementById('empFormatted').appendChild(document.createTextNode(beautifyHtmlString)); 
where you are putting the vkbeautify's output...
   
Comments
Nitin Singh India 17-Mar-18 13:37pm
   
Any reason why all the answers were downvoted ? My answer was from production code itself

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900