hi dis is varma..here is my xml data & i want to display this data in HTMl

Question

varma51 0 Newbie Poster

14 Years Ago

gud morning frends i need ur valuable reply..here is my xml data i want to display dis data in the html table..so i need html code for to display dis data in the form of table..
[xml code]
<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/html" href="j.html"?>
<catalogs>
<catalog name="infibeam">
<book>
<title>cnds</title>
<author>balagurusamy</author>
<company>zseries</company>
<country>america</country>
<price>
<mrp_price>150</mrp_price>
<discount>15%</discount>
</price>
</book>

<book>
<title>java</title>
<author>chandrasekhar</author>
<company>qlines</company>
<country>england</country>
<price>
<mrp_price>15</mrp_price>
<discount>5%</discount>
</price>
</book>
<book>
<title>oracle</title>
<author>somasekhar</author>
<company>MAster</company>
<country>australia</country>
<price>
<mrp_price>15</mrp_price>
<discount>5%</discount>
</price>
</book>
</catalog>

<catalog name="flipcart">
<book>
<title>C.N</title>
<author>varma</author>
<company>Vseries</company>
<country>india</country>
<price>
<mrp_price>150</mrp_price>
<discount>15%</discount>
</price>
</book>
<book>
<title>C.G</title>
<author>Eswar</author>
<company>kseries</company>
<country>india</country>
<price>
<mrp_price>200</mrp_price>
<discount>10%</discount>
</price>
</book>
</catalog>
</catalogs>

[xml code]

my required output lyk dis..

infibeam
TITLE AUTHOR COMPANY COUNTRY
cnds balagurusamy zseries america
java chandrasekhar qlines england
oracle somasekhar MAster australia

flipcart

TITLE AUTHOR COMPANY COUNTRY
C.N varma Vseries india
C.G Eswara kseries india

html-css xml

3 Contributors
6 Replies
285 Views
2 Months Discussion Span
Latest Post 13 Years Ago Latest Post by varma51

Dani AI

Generated 9 Months Ago

A short wrap-up and a practical alternative that complements the thread above.

wanted the catalog/book XML rendered as HTML tables. showed a quick Excel export for one-off conversions, and provided a reusable XSLT transform that groups rows by catalog and emits a header plus a table for each catalog. For repeatable or server-side transforms the XSLT approach is clean; for dynamic pages a small client-side parser is often easier.

Notes and common pitfalls to watch for:

Browsers will only apply an XSLT when the XML is well-formed and the stylesheet PI is correct (use type="text/xsl" and an .xsl file). Modern browsers may block local file transforms; serve files over HTTP during testing.
Character encoding matters: convert ISO-8859-1 to UTF-8 (or serve the correct Content-Type/charset) to avoid garbled characters.
Escape or sanitize any text that will be injected into HTML. Trim whitespace from element text nodes (common when XML is edited by hand).

A concise client-side option (load the XML and build tables) — paste into a page that can fetch the XML:

fetch('books.xml')
  .then(r => r.text())
  .then(txt => {
    const doc = new DOMParser().parseFromString(txt, 'application/xml');
    const out = document.createElement('div');
    doc.querySelectorAll('catalog').forEach(cat => {
      const h = document.createElement('div');
      h.textContent = cat.getAttribute('name') || '';
      out.appendChild(h);
      const table = document.createElement('table');
      const head = document.createElement('tr');
      ['TITLE','AUTHOR','COMPANY','COUNTRY'].forEach(t => { const th=document.createElement('th'); th.textContent=t; head.appendChild(th); });
      table.appendChild(head);
      cat.querySelectorAll('book').forEach(book => {
        const tr = document.createElement('tr');
        ['title','author','company','country'].forEach(tag => {
          const td = document.createElement('td');
          const el = book.querySelector(tag);
          td.textContent = el ? el.textContent.trim() : '';
          tr.appendChild(td);
        });
        table.appendChild(tr);
      });
      out.appendChild(table);
    });
    document.body.appendChild(out);
  });

Accessibility and polish: use proper <th scope="col"> for headers, add minimal CSS for spacing, and consider server-side XSLT when the XML is large or must be cached. ’s XSLT is a solid starting point for that workflow.

All 6 Replies

samsylvestertty 12 Newbie Poster

14 Years Ago

Do you need this same XML to be exported to HTML? or you need an automation routine to convert any XML ( like the one you specified ) to HTML table?

For the first criteria. 
( Steps are for MS Excel 2007 )
1) Import the xml file to Microsoft Excel 
    a) Open an excel workbook
    b) Go to the Data tab 
    c) Under "Get External Data" click "From Other Sources"
    d) Select "From XML Data Import"
    e) Select the XML file
    f) Give OK when prompted
2) Save the xml file as a HTML Page
    a) Use "Save As" option
    b) Select "Web Page (*.htm, *.html)"
    c) Select "Selection: Table1"
    d) Save

And for the second one
    1) Choose a language in which you want to have the routine written
    2) Move your question to the appropriate section

Import XML
XML_Source

Mike Askew 131 Veteran Poster

14 Years Ago

@samsylvertertty, It is posted in the correct place for XML to HTML, this is a use for XSLT.

Writing it currently.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

samsylvestertty 12 Newbie Poster · Answer 1 · 2012-07-16T09:12:19+00:00

samsylvestertty 12 Newbie Poster

14 Years Ago

sorry i've got it wrong.... :)

Mike Askew 131 Veteran Poster Featured Poster · Answer 2 · 2012-07-16T09:14:32+00:00

infibeam
TITLE AUTHOR COMPANY COUNTRY
cnds balagurusamy zseries america
java chandrasekhar qlines england
oracle somasekhar MAster australia

flipcart

TITLE AUTHOR COMPANY COUNTRY
C.N varma Vseries india
C.G Eswara kseries india

Are the infibeam and flipcart required in the output as they dont look like they fit into the tables you've drawn?

If they do, please clarify your tables further, possibly graphically or manually produce the HTML table code you require and it can then be replicated automatically.

I will assume they do not need to be in the tables and just the data is required until you respond.

Mike Askew 131 Veteran Poster Featured Poster · Answer 3 · 2012-07-16T09:38:58+00:00

Figured I may as well do with the catalog names, its easy to remove them.

The following XSLT style sheet:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                exclude-result-prefixes="xsl">

  <xsl:output indent="yes" omit-xml-declaration ="yes" method="xml"/>
  <xsl:strip-space elements="*"/>

  <!-- Remove this template to get rid of the <html> tags -->
  <xsl:template match="catalogs">
    <xsl:element name="html">
      <xsl:apply-templates/>
    </xsl:element>
  </xsl:template>

  <xsl:template match="catalogs/catalog">
      <!-- My way of getting the catalog name to show, feel free to use a different one -->
      <xsl:element name="div">
        <xsl:value-of select ="@name"/>
      </xsl:element>
      <xsl:element name="table">
        <xsl:element name="tr">
          <!-- Add/Remove lines here as required to change the amount of column headers -->
          <xsl:element name="th">TITLE</xsl:element>
          <xsl:element name="th">AUTHOR</xsl:element>
          <xsl:element name="th">COMPANY</xsl:element>
          <xsl:element name="th">COUNTRY</xsl:element>
        </xsl:element>
        <xsl:apply-templates/>
      </xsl:element>
  </xsl:template>

  <xsl:template match="catalogs/catalog/book">
    <xsl:element name="tr">
      <xsl:element name="td">
        <xsl:value-of select="title"/>
      </xsl:element>
      <xsl:element name="td">
        <xsl:value-of select="author"/>
      </xsl:element>
      <xsl:element name="td">
        <xsl:value-of select="company"/>
      </xsl:element>
      <xsl:element name="td">
        <xsl:value-of select="country"/>
      </xsl:element>
    </xsl:element>
  </xsl:template>

</xsl:stylesheet>

With input:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Edited by XMLSpy® -->
<?xml-stylesheet type="text/html" href="j.html"?>
<catalogs>
  <catalog name="infibeam">
    <book>
      <title>cnds</title>
      <author>balagurusamy</author>
      <company>zseries</company>
      <country>america</country>
      <price>
        <mrp_price>150</mrp_price>
        <discount>15%</discount>
      </price>
    </book>
    <book>
      <title>java</title>
      <author>chandrasekhar</author>
      <company>qlines</company>
      <country>england</country>
      <price>
        <mrp_price>15</mrp_price>
        <discount>5%</discount>
      </price>
    </book>
    <book>
      <title>oracle</title>
      <author>somasekhar</author>
      <company>MAster</company>
      <country>australia</country>
      <price>
        <mrp_price>15</mrp_price>
        <discount>5%</discount>
      </price>
    </book>
  </catalog>
  <catalog name="flipcart">
    <book>
      <title>C.N</title>
      <author>varma</author>
      <company>Vseries</company>
      <country>india</country>
      <price>
        <mrp_price>150</mrp_price>
        <discount>15%</discount>
      </price>
    </book>
    <book>
      <title>C.G</title>
      <author>Eswar</author>
      <company>kseries</company>
      <country>india</country>
      <price>
        <mrp_price>200</mrp_price>
        <discount>10%</discount>
      </price>
    </book>
  </catalog>
</catalogs>

Produces:

<html>
  <div>infibeam</div>
  <table>
    <tr>
      <th>TITLE</th>
      <th>AUTHOR</th>
      <th>COMPANY</th>
      <th>COUNTRY</th>
    </tr>
    <tr>
      <td>cnds</td>
      <td>balagurusamy</td>
      <td>zseries</td>
      <td>america</td>
    </tr>
    <tr>
      <td>java</td>
      <td>chandrasekhar</td>
      <td>qlines</td>
      <td>england</td>
    </tr>
    <tr>
      <td>oracle</td>
      <td>somasekhar</td>
      <td>MAster</td>
      <td>australia</td>
    </tr>
  </table>
  <div>flipcart</div>
  <table>
    <tr>
      <th>TITLE</th>
      <th>AUTHOR</th>
      <th>COMPANY</th>
      <th>COUNTRY</th>
    </tr>
    <tr>
      <td>C.N</td>
      <td>varma</td>
      <td>Vseries</td>
      <td>india</td>
    </tr>
    <tr>
      <td>C.G</td>
      <td>Eswar</td>
      <td>kseries</td>
      <td>india</td>
    </tr>
  </table>
</html>

Which displays as required this:
Untitled82

Hope that helps :)

varma51 0 Newbie Poster · Answer 4 · 2012-10-15T06:55:37+00:00

varma51 0 Newbie Poster

13 Years Ago

thank you all

hi dis is varma..here is my xml data & i want to display this data in HTMl

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers