Convert XML string to HTML form in JavaScript

Question

I need to build a HTML form from an XML string using Javascript/jQuery.

I came through the below answer

The answer talks about this - XML to Form generator

That's exactly what i want, but i could not find the javascript code in the provided link. I have tried parsing the XML string and iterating through nodes to build the Form, but there are lots of bugs in my code and i am short of time. Below is the code i tried:

function xmlToForm(text) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(text,"text/xml");

    var htmlForm = '<form action="">';


    var rootNode = xmlDoc.childNodes[0];

    htmlForm += nodeToHtmlForm(rootNode);
    htmlForm += '</form>';

    function nodeToHtmlForm (node) {
        var form = '';

        if(node.childNodes.length > 0) {
            node.childNodes.forEach(function(childNode) {

            if(childNode.childNodes.length > 0) {

                if(childNode.firstChild.nodeValue) {
                    form += '<div class="form-group">'
                    form += '<label><h4>'+ childNode.nodeName +'</h4>'+ '</label>';
                    form += '<input class="" id="id" value=' + childNode.firstChild.nodeValue + '>';
                    form += '</div>'
                } else {

                }

                form += '<br><h4>'+ childNode.nodeName +'</h4><br>'

                childNode.childNodes.forEach(function(grandChildNode) {
                    console.log(grandChildNode);
                    form += nodeToHtmlForm(grandChildNode)
                });
            }

            else {
                form += '<div class="form-group">'
                form += '<label>'+node.nodeName+'</label>';
                form += '<input class="" id="id" value='+node.firstChild.nodeValue+'>';
                form += '</div>'
            }

            });
        }   else {
                if(node.firstChild) {
                    form += '<div class="form-group">'
                    form += '<label>'+node.nodeName+'</label>';
                    form += '<input class="" id="id" value='+node.firstChild.nodeValue+'>';
                    form += '</div>'
                } else {
                    form += '<br><h4>'+ node.nodeName +'</h4><br>';
                }
            }

        return form;
    }
    return htmlForm;
    //document.getElementById("htmlForm").innerHTML = htmlForm;
}

Someone please help me build the HTML form from XML.

I dont think you can do that efficiently in js. The site you mentioned doesn't use js either. After googling a bit I found that there are ways using XSLT to achieve what you want. I think you should parse the xml in the server side and return the html back to the user like an api. — orangespark, Dec 26 '17 at 10:35
@orangespark, actually this is a chrome extension where i have to fetch the XML from background page, convert it to HTML form and display in the extension. I am restricted to use only javascript/jQuery for this. — Vishal Dubey, Dec 26 '17 at 10:54
why dont u just use the get or ajax call to get the data i think you can do that using js and jquery — orangespark, Dec 26 '17 at 10:56
Still i will have to write the processing logic in server side code which will be called by ajax. I dont have any server here, i am restricted to only Javascript. — Vishal Dubey, Dec 26 '17 at 11:02
but heavy computation like this are preferred to be done in the server itself as u have to parse the xml and compile it to html. Anyway try using js as u dont have server. — orangespark, Dec 26 '17 at 11:11

score 0 · Answer 1 · answered Dec 26 '17 at 10:42

0

This will definitely help you. But you can't do it efficiently with jquery alone.

https://github.com/davidmoten/xsd-forms

answered Dec 26 '17 at 10:42

Happs

115
7

How can this help the OP? Please explain. Its about xsd i.e xml schema document conversion to html – orangespark Dec 26 '17 at 11:13
@orangespark I hope you have concrete knowledge of what xml and xsd specifies. Actually the xsd is xml itself. Its purpose is to validate the structure of another xml document. The xsd is not mandatory for any xml, but it assures that the xml could be used for some particular purposes. The xml is only containing data in suitable format and structure. – Happs Dec 26 '17 at 11:38
u just googled the difference when i asked u :P u could have just shown the link instead of copy pasting it here https://stackoverflow.com/a/2334009/2791802... LOL – orangespark Dec 27 '17 at 05:21
i get that you want to make some reputation but that doesn't mean you have to just answer things u don't have any idea about or in your words "concrete knowledge of the subject". Be patient and Prosper. :) – orangespark Dec 27 '17 at 05:23
OMG. Why are you feeling so offended. LOL, Thanks for the reserch @orangespark but the current link was https://questionfocus.com/what-is-the-difference-between-xml-and-xsd.html which gives the complete implementation. I have read through it and just tried to share the knowledge. Keep calm!! – Happs Dec 27 '17 at 05:39
okay buddy if thats what you think i am not gonna burst ur bubble :D – orangespark Dec 27 '17 at 05:44
Tysm for your kind thought :) – Happs Dec 27 '17 at 05:45

score 0 · Accepted Answer · answered Dec 28 '17 at 09:53

For those curious or couldn't find the solution anywhere else

function xmlToForm(xmlDoc) {
        var framed_html = "";

        xml_to_html($(xmlDoc[0].children[0]));      

        function xml_to_html(xmlDoc) {
            if (xmlDoc[0].firstElementChild) {
                framed_html += "<fieldset class='back-fieldset'><legend>" + xmlDoc[0].nodeName + "</legend>";
                xml_to_html($(xmlDoc[0].firstElementChild));
                framed_html += "</fieldset>";
                if (xmlDoc[0].nextElementSibling) {
                    xml_to_html($(xmlDoc[0].nextElementSibling));
                }

            } else {
                framed_html += "<div class='form-group'><label>" + xmlDoc[0].nodeName + "</label>";
                framed_html += "<input type='text' value='"+xmlDoc[0].innerHTML+"'></div>";

                if (xmlDoc[0].nextElementSibling) {
                    xml_to_html($(xmlDoc[0].nextElementSibling));
                } else {
                    framed_html += "<hr>";
                }
            }

        }

        return framed_html;
    }

Hello Vishal, Can you share the HTML form as well. Have you called the function onclick button ? Have you pasted xml file content or uploaded it . or gave the link of the content — Bashabi, Jan 07 '20 at 10:48

Convert XML string to HTML form in JavaScript

2 Answers2