Display XML in HTML Div

Question

1.00/5 (2 votes)

See more:

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.

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 7-Jun-15 6:52am

Praveen Raghuvanshi

Updated 22-Aug-17 19:27pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 7-Jun-15 15:13pm

"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!!!

Sergey Alexandrovich Kryukov 8-Jun-15 11:28am

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.

Sergey Alexandrovich Kryukov 8-Jun-15 14:59pm

Thank you for the clarification. That's all right. Just escape HTML markup (use > 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]

3 solutions

Solution 2

Please see my comments to the question. You need to escape HTML characters using character entities.

Please see:
http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript[^],
http://jsfiddle.net/E3EqX/13[^],
http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities[^].

—SA

Posted 8-Jun-15 9:02am

Sergey Alexandrovich Kryukov

Comments

Praveen Raghuvanshi 9-Jun-15 0:27am

Thanks for sharing above links!

Solution 3

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...

Posted 16-Nov-16 1:15am

Nitin Singh India

Comments

Nitin Singh India 17-Mar-18 13:37pm

Any reason why all the answers were downvoted ? My answer was from production code itself

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Praveen Raghuvanshi · Accepted Answer · 2015-06-08T07:53:00

Solution 1

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.

Posted 8-Jun-15 7:53am

Praveen Raghuvanshi

Updated 8-Jun-15 7:54am

v2