创建一个动态html表,并使用javascript将其填充为xml数据

问题描述 投票:0回答:1

我需要创建一个动态数据表,通过读取xml来显示数据

这是我的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>[email protected]</Value>
            <Value>qwerty</Value>
        </Row>

    </Table>
    <Table name="dt_EdgeCaseRoute">
        <Header>
            <Column name="Username" type="String" />
            <Column name="Password" type="String" />
        </Header>
        <Row>
            <Value>Carl</Value>
            <Value>1qaz2wsx</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并将数据提供给json

var convert = require('xml-js');
var xml = require('fs').readFileSync('./testscenario.xml', 'utf8');

var result1 = convert.xml2json(xml, {compact: true, spaces: 4});

但是,我不确定如何进行休息。

我需要做的是根据该数据创建一个表,并使用列名和行值填充表。

构建此表的最佳方法是什么?

javascript jquery node.js ejs
1个回答
0
投票

让客户端使用jquery执行此操作?那么就不需要JSON了

var 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>[email protected]</Value>
            <Value>qwerty</Value>
        </Row>

    </Table>
    <Table name="dt_EdgeCaseRoute">
        <Header>
            <Column name="Username" type="String" />
            <Column name="Password" type="String" />
        </Header>
        <Row>
            <Value>Carl</Value>
            <Value>1qaz2wsx</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 $xml = $(xml);
$xml.find("Table").each(function() {
  console.log($(this).attr("name"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.