Создавайте динамические таблицы, читая XML

Question

Привет. Я пытаюсь создать таблицы, прочитав XML-файл.Я использую nodejs с Express Framework.используя модули npm xmldom и xmldoc.Мне нужно отобразить эти таблицы данных на странице ejs.

Это моя структура XML-файла

<DataTables xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="file://C:/FRM/xsd/DataTables.xsd" >
    <Table name="dt_EdgeCaseHome">
        <Header>
            <Column name="Username" type="String" />
            <Column name="Email" type="String" />
            <Column name="Password" type="String" />
        </Header>
        <Row>
            <Value>brian</Value>
            <Value>brianf@edge.com</Value>
            <Value>qwerty</Value>
        </Row>
    </Table>
    <Table name="dt_EdgeCaseSpectrum">
        <Header>
            <Column name="AppHeader" type="String" />
            <Column name="UserID" type="String" />
            <Column name="Service" type="String" />
            <Column name="Clients" type="String" />
        </Header>
        <Row>
            <Value>Contract</Value>
            <Value>47</Value>
            <Value>Agent</Value>
            <Value>Exodus</Value>
        </Row>
        <Row>
            <Value>Contract</Value>
            <Value>49</Value>
            <Value>Agent</Value>
            <Value>Prometheus</Value>
        </Row>
    </Table>
</DataTables>

, и мой ожидаемый результат должен быть

Это мой текущий код, есть ли лучший подход к этому требованию.также мне нужно отобразить таблицы, созданные из этого скрипта, в модальном окне, которое всплывает при нажатии кнопки, как я могу это сделать?

код:

var xmldoc = require('xmldoc');
var DOMParser = require('xmldom').DOMParser;
var parser = new DOMParser();
var fs = require('fs');

module.exports={
    XMLRead: function (){     
    var data;

        //read the Tables.xml
        data=fs.readFileSync(__dirname + './Tables.xml','utf8');

        // Create your table element
        table = document.createElement("Table");
        var DtName=document.getElementById("btn_dtname").value;
        //parse xml
        var dom = parser.parseFromString(data);
        var tables = dom.getElementsByTagName("Table").getAttribute("name");
        tables.forEach(function(tblName){
        if(tblName==DtName){
            var cols = dom.getElementsByTagName("Header").getChildNodes();
            table = document.createElement("tr");
            cols.forEach(function(header){
                var Headers=header.getAttribute("name");
                table = document.createElement("th").value=Headers;
table = document.createElement("</th>")
            }
        // document.createElement("</tr>");
        
            var rowCount = tblName.getElementsByTagName("Row");
            rowCount.forEach(function(r){
            // document.createElement("<tr>"); 
              var count = r.getChildNodes();
              count.forEach(function(r1){
              var colval=r1.getAttribute("text");
            // document.createElement("<td>").value=colval;
            // document.createElement("</td>");
               }
            // document.createElement("</tr>"); 
            }
        }
    }
  
}

Answer 1

Хорошо, вот как я это сделал, я сослался на этот пост и придумал собственное решение.кредит идет на @ blex

Это рабочий код для вышеуказанного требования,

//create table by reading xml string
var xmlString = '<DataTables xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file://C:/FRM/xsd/DataTables.xsd" ><Table name="dt_EdgeCaseHome"><Header><Column name="Username" type="String" /><Column name="Email" type="String" /><Column name="Password" type="String" /></Header><Row><Value>brian</Value><Value>brianf@edge.com</Value><Value>qwerty</Value></Row></Table><Table name="dt_EdgeCaseSpectrum"><Header><Column name="AppHeader" type="String" /><Column name="UserID" type="String" /><Column name="Service" type="String" /><Column name="Clients" type="String" /></Header><Row><Value>Contract</Value><Value>47</Value><Value>Agent</Value><Value>Exodus</Value></Row><Row><Value>Contract</Value><Value>49</Value><Value>Agent</Value><Value>Prometheus</Value></Row></Table></DataTables>',
xml,

// Create table element
table = document.createElement('table');
table.style.width = '100%';
table.setAttribute('border', '1');
tbdy = document.createElement('tbody');
tr = tbdy.insertRow();
tr.id='header';
// Parse the xml
if (window.DOMParser){ // Standard browsers
    var parser = new DOMParser();
    xml = parser.parseFromString(xmlString, "text/xml");
}
else { // Internet Explorer
    xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = false;
    xml.loadXML(xmlString); 
}

var tables = xml.getElementsByTagName("Table");

// for each table
for(var t=0; t<tables.length; t++){
    tableName = tables[t].getAttribute("name");
  console.log(tableName);
  var dtName="dt_EdgeCaseSpectrum";
  if(dtName.match(tableName)){
  // for each table header
    var headers = tables[t].getElementsByTagName("Header");
    var cols = headers[0].childNodes;
    for(var c=0;c<cols.length;c++){
    columnName = cols[c].getAttribute("name");
    td = tr.insertCell();
    td.id=c;
    td.setAttribute('name',columnName);
    td.textContent = columnName;
    console.log(columnName);
    }

    // for each table row
    var rows = tables[t].getElementsByTagName("Row");
    for(var r=0;r<rows.length;r++){
        console.log("row "+r);
      tr = tbdy.insertRow();
      tr.id='iteration_'+r;
        var vals = rows[r].childNodes;
        for(var x=0;x<vals.length;x++){
        value = vals[x].textContent;
      console.log(value);
      td = tr.insertCell();
      td.id=x;
      td.setAttribute('value', value)
      td.textContent = value;
      }
    }
    tbdy.appendChild(tr);
    table.appendChild(tbdy);
    // Append table to the body
    document.body.appendChild(table);
  }
}

JS Fiddle Demo