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

I am a very new to HTML and javascript. Have e 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.

.asp

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 binations.

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

I am a very new to HTML and javascript. Have e 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./xml/ajax_applications.asp

https://www.geeksforgeeks/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 binations.

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

Share Improve this question edited Jul 22, 2022 at 9:23 asked Jul 21, 2022 at 13:12 Python Bang 4826 silver badges20 bronze badges

Can you please explain little more. What will be the rows and columns from this XML document ? And which attributes will be the value ? – Rohìt Jíndal Commented Jul 23, 2022 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 Commented Jul 26, 2022 at 8: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 Commented Jul 26, 2022 at 8:26
this link pythonbasics/webserver could help you to create a web server and in the do_GET you should implement xml to html conversion – Lety Commented Jul 27, 2022 at 7:04
to handle big table, you should use datatables 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 Commented Jul 29, 2022 at 6:15

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5 +50

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/docs/dev/reference/api/pandas.read_xml.html

and

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

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

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./a/20764147/13186118

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

3 Answers 3

与本文相关的文章

评论列表(0)