[英]parse xml and create html table pure javascript (using data block)
[英]Create a dynamic html table and populate it with xml data using javascript
我需要創建一個動態數據表,通過讀取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>brianf@edge.com</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});
但是,我不確定如何進行休息。
我需要做的是根據該數據創建一個表,並用列名和行值填充該表。
建立該表的最佳方法是什么?
讓客戶端使用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>brianf@edge.com</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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.