在JavaScript中将XML字符串转换为HTML表单

Question

我需要使用Javascript / jQuery从XML字符串构建HTML表单。

我通过以下答案得出结论

XML to Form

答案谈到了这个问题 - XML to Form generator

这正是我想要的，但我在提供的链接中找不到javascript代码。我已经尝试解析XML字符串并迭代节点来构建表单，但是我的代码中存在很多错误，而且时间不够。以下是我试过的代码：

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;
}

有人请帮我从XML构建HTML表单。

Answer 1

这肯定会对你有所帮助。但是你不能单独用jquery来有效地做到这一点。

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

Answer 2

对于那些好奇或无法在其他任何地方找到解决方案

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;
    }