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.

python with HTML and javascript
python with json and HTML
HTML with javascript

Can you please explain little more. What will be the rows and columns from this XML document ? And which attributes will be the value ? — Debug Diva, Jul 23 '22 at 17:45
if you can install libraries, and you cant get the results you want with AJAX. jquery is probably your best bet. Are you using Django? — Stamatis Valis, Jul 26 '22 at 08:16
@StamatisValis I glitch is that i can not install any libraries as its not allowed. I am using python purely as of now — Python Bang, Jul 26 '22 at 08:26
this link https://pythonbasics.org/webserver/ could help you to create a web server and in the do_GET you should implement xml to html conversion — Lety, Jul 27 '22 at 07:04
to handle big table, you should use https://datatables.net/ and show data in pages. datatables is javascript tools that use json to query data to the server, so in this case you should convert data to json format, hope this help you — Lety, Jul 29 '22 at 06:15
Why don't you just create an XSLT stylesheet and apply it to your XML? Your browser will then do the job for you — gimix, Jul 29 '22 at 13:18

Barry the Platipus · Accepted Answer · 2022-07-29T12:49:36.393

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

Lajos Arpad · Answer 2 · 2022-07-27T06:36:59.417

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

score 0 · Answer 3 · answered Jul 21 '22 at 13:24

0

It's not entirely clear from your question whether this a one-off, or is it something you need to automate via reading a file?

If it's a one off, online tools are great for this kind of thing. https://wtools.io/convert-xml-to-html-table seems to work fine with your data.

If you need to read the file programmatically, your second link looks like it could be a good solution. If you need to run it locally by opening the HTML file and can't install a web server, you might want to refer to this answer on allowing Chrome to read files when loading an HTML file: https://stackoverflow.com/a/20764147/13186118

answered Jul 21 '22 at 13:24

Peter Cole

51
5

thanks for your response. Trying to automate it so i cant use the online tool. Regarding the --allow-file-access-from-files to a web browser location is also not allowed as this will be delivered to clients and can not ask them to do these as pre-requisites. – Python Bang Jul 21 '22 at 13:38
@PythonBang I don’t think there’s going to be much you can do here without getting some kind of web hosting to deliver this product to clients (and a proper development environment, ideally), or exploring different technologies to deliver this. Delivering standalone HTML files is not really a viable solution for an application unfortunately. – Peter Cole Jul 21 '22 at 21:37
Do we have a way via python ? – Python Bang Jul 22 '22 at 07:58

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

3 Answers3