JavaScript에서 XML 문자열을 HTML 양식으로 변환

Question

Javascript/jQuery를 사용하여 XML 문자열에서 HTML 양식을 작성해야합니다.

나는 아래의 답변을 통해

XML to Form

응답이에 대해 이야기했다 - 정확히 내가 원하는 무엇 XML to Form generator

을,하지만 난 제공된 링크에서 자바 스크립트 코드를 찾을 수 없습니다. 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

호기심 사람들을 위해

또는 당신이 JS에 효율적으로 그렇게 할 수 있다고 생각 그나마 다른 곳 솔루션

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

Answer 2

이것은 분명 도움이 될 것입니다. 하지만 jquery만으로는 효율적으로 처리 할 수 ​​없습니다.

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