Create a dynamic html table and populate it with xml data using javascript

Question

I need to create a dynamic data table which shows data by reading a xml

here is my 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>

I was able to read the xml and get the data to a json using the following code

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

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

But, I'm not sure on how to proceed with rest.

What I need to do is create a table according to that data and populate the table with column names and row values.

What is the best approach to build this table?

Answer 1

Let the client do it with jquery? No need for JSON then

 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>