Display HTML table from xml file over web browser without using any software or installation on unix

Question

I am a very new to HTML and javascript. Have come across many questions with regard to my problem and after struggling a lot to find a solution, I am posting this question.

Problem statment:

I have an xml which I am trying to convert it to HTML so that I can display it over web browser in a table format.

<?xml version="1.0" encoding="UTF-8"?>
<chapter name="ndlkjfidm" date="dfhkryi">
    <edge name="nnn" P="ffgnp" V="0.825" T="125c">
        <seen name="seen1">
        </seen>
        <seen name="ABB">
            <mob name="adas_jk3" type="entry">
                <nod name="VSS" voltage="0.000000" vector="!ENXB" active_input="NA" active_ouput="ENX">
                    <temp name="ADS_DEFAULT_temp_LOW">
                        <raw nod="VBP" alt="7.05537e-15" jus="74.4619" />
                        <raw nod="VDDC" alt="4.63027e-10" jus="115.178" />
                        <raw nod="VDDP" alt="6.75316e-10" jus="115.178" />
                        <raw nod="VSS" alt="5.04568e-14" jus="9.63935" />
                        <raw nod="VBN" alt="1.21047e-14" jus="192.973" />
                        <raw nod="VBP" trip="4.58141e-12" />
                        <raw nod="VDDC" trip="5.19549e-09" />
                        <raw nod="VDDP" trip="5.49458e-08" />
                        <raw nod="VSS" trip="6.00563e-08" />
                        <raw nod="VBN" trip="8.94924e-11" />
                    </temp>
                </nod>
                <nod name="VSS" voltage="0.000000" vector="ENXB" active_input="NA" active_ouput="ENX">
                    <temp name="ADS_DEFAULT_temp_HIGH">
                        <raw nod="VBP" alt="7.05537e-15" jus="74.4644" />
                        <raw nod="VDDC" alt="1.52578e-14" jus="311.073" />
                        <raw nod="VDDP" alt="1.00188e-14" jus="521.709" />
                        <raw nod="VSS" alt="4.03483e-14" jus="11.1118" />
                        <raw nod="VBN" alt="1.21047e-14" jus="192.975" />
                        <raw nod="VBP" trip="4.58141e-12" />
                        <raw nod="VDDC" trip="1.29302e-12" />
                        <raw nod="VDDP" trip="4.92723e-08" />
                        <raw nod="VSS" trip="4.91887e-08" />
                        <raw nod="VBN" trip="8.95356e-11" />
                    </temp>
                </nod>
            </mob>
        </seen>
    </edge>
</chapter>

Below are the links that I have tried.

https://www.w3schools.com/xml/ajax_applications.asp

https://www.geeksforgeeks.org/read-xml-file-and-print-the-details-as-tabular-data-by-using-javascript/

Loop holes:

I can not install anything (sudo apt install apache2 etc..) or any software (xammp etc) Because of which the javascript does not display the table.

Tried with pandas as well but do not know how to display it over web browser and the xml too is very huge ( ~1GB)

Can someone please suggest me on how to get this done using any language combinations.

1. python with HTML and javascript
2. python with json and HTML
3. HTML with javascript

Answer 1

This should solve your issue (as asked), using pandas:

import pandas as pd

xml_data = '''<?xml version="1.0" encoding="UTF-8"?>
<chapter name="ndlkjfidm" date="dfhkryi">
    <edge name="nnn" P="ffgnp" V="0.825" T="125c">
        <seen name="seen1">
        </seen>
        <seen name="ABB">
            <mob name="adas_jk3" type="entry">
                <nod name="VSS" voltage="0.000000" vector="!ENXB" active_input="NA" active_ouput="ENX">
                    <temp name="ADS_DEFAULT_temp_LOW">
                        <raw nod="VBP" alt="7.05537e-15" jus="74.4619" />
                        <raw nod="VDDC" alt="4.63027e-10" jus="115.178" />
                        <raw nod="VDDP" alt="6.75316e-10" jus="115.178" />
                        <raw nod="VSS" alt="5.04568e-14" jus="9.63935" />
                        <raw nod="VBN" alt="1.21047e-14" jus="192.973" />
                        <raw nod="VBP" trip="4.58141e-12" />
                        <raw nod="VDDC" trip="5.19549e-09" />
                        <raw nod="VDDP" trip="5.49458e-08" />
                        <raw nod="VSS" trip="6.00563e-08" />
                        <raw nod="VBN" trip="8.94924e-11" />
                    </temp>
                </nod>
                <nod name="VSS" voltage="0.000000" vector="ENXB" active_input="NA" active_ouput="ENX">
                    <temp name="ADS_DEFAULT_temp_HIGH">
                        <raw nod="VBP" alt="7.05537e-15" jus="74.4644" />
                        <raw nod="VDDC" alt="1.52578e-14" jus="311.073" />
                        <raw nod="VDDP" alt="1.00188e-14" jus="521.709" />
                        <raw nod="VSS" alt="4.03483e-14" jus="11.1118" />
                        <raw nod="VBN" alt="1.21047e-14" jus="192.975" />
                        <raw nod="VBP" trip="4.58141e-12" />
                        <raw nod="VDDC" trip="1.29302e-12" />
                        <raw nod="VDDP" trip="4.92723e-08" />
                        <raw nod="VSS" trip="4.91887e-08" />
                        <raw nod="VBN" trip="8.95356e-11" />
                    </temp>
                </nod>
            </mob>
        </seen>
    </edge>
</chapter>


'''

One option to read the xml would be:

df = pd.read_xml(xml_data)
# df
html = df.to_html()
print(html)

Result:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>name</th>
      <th>P</th>
      <th>V</th>
      <th>T</th>
      <th>seen</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>nnn</td>
      <td>ffgnp</td>
      <td>0.825</td>
      <td>125c</td>
      <td>NaN</td>
    </tr>
  </tbody>
</table>

Of course, you can drill down into that xml:

df = pd.read_xml(xml_data, xpath=".//nod")
# df
html = df.to_html()
print(html)

This would result in:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>name</th>
      <th>voltage</th>
      <th>vector</th>
      <th>active_input</th>
      <th>active_ouput</th>
      <th>temp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>VSS</td>
      <td>0.0</td>
      <td>!ENXB</td>
      <td>NaN</td>
      <td>ENX</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>1</th>
      <td>VSS</td>
      <td>0.0</td>
      <td>ENXB</td>
      <td>NaN</td>
      <td>ENX</td>
      <td>NaN</td>
    </tr>
  </tbody>
</table>

Or even:

df = pd.read_xml(xml_data, xpath=".//raw")
# df
html = df.to_html()
print(html)

Returning:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>nod</th>
      <th>alt</th>
      <th>jus</th>
      <th>trip</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>VBP</td>
      <td>7.055370e-15</td>
      <td>74.46190</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>1</th>
      <td>VDDC</td>
      <td>4.630270e-10</td>
      <td>115.17800</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>2</th>
      <td>VDDP</td>
      <td>6.753160e-10</td>
      <td>115.17800</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>3</th>
      <td>VSS</td>
      <td>5.045680e-14</td>
      <td>9.63935</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>4</th>
      <td>VBN</td>
      <td>1.210470e-14</td>
      <td>192.97300</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>5</th>
      <td>VBP</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>4.581410e-12</td>
    </tr>
    <tr>
      <th>6</th>
      <td>VDDC</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>5.195490e-09</td>
    </tr>
    <tr>
      <th>7</th>
      <td>VDDP</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>5.494580e-08</td>
    </tr>
    <tr>
      <th>8</th>
      <td>VSS</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>6.005630e-08</td>
    </tr>
    <tr>
      <th>9</th>
      <td>VBN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>8.949240e-11</td>
    </tr>
    <tr>
      <th>10</th>
      <td>VBP</td>
      <td>7.055370e-15</td>
      <td>74.46440</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>11</th>
      <td>VDDC</td>
      <td>1.525780e-14</td>
      <td>311.07300</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>12</th>
      <td>VDDP</td>
      <td>1.001880e-14</td>
      <td>521.70900</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>13</th>
      <td>VSS</td>
      <td>4.034830e-14</td>
      <td>11.11180</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>14</th>
      <td>VBN</td>
      <td>1.210470e-14</td>
      <td>192.97500</td>
      <td>NaN</td>
    </tr>
    <tr>
      <th>15</th>
      <td>VBP</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>4.581410e-12</td>
    </tr>
    <tr>
      <th>16</th>
      <td>VDDC</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>1.293020e-12</td>
    </tr>
    <tr>
      <th>17</th>
      <td>VDDP</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>4.927230e-08</td>
    </tr>
    <tr>
      <th>18</th>
      <td>VSS</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>4.918870e-08</td>
    </tr>
    <tr>
      <th>19</th>
      <td>VBN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>8.953560e-11</td>
    </tr>
  </tbody>
</table>

The following pandas documentation might be helpful:

https://pandas.pydata.org/docs/dev/reference/api/pandas.read_xml.html

and

https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.to_html.html

Answer 2

This is certainly a doable, implementable goal. A very simple approach would be to view your XML as a text. First, map the element types to tags that you would like to use. Maybe the HTML-equivalent to chapter is section. edge, seen, mob, nod are maybe divs. As about the embedded structure of temp and raw, you may want to use ul and li tags, respectively.

Pattern:

• you replace <foo with <bar and </foo> with </bar>, where foo is your XML node type and bar is the HTML element type you choose to replace it with
• you wrap the html and body tags around your content