Member Avatar for Gody

Hi everybody,

I have a XML file having data stored in tags as

<Username>User name here</Username>
<Password>Password here</Username>

(There will be data of around 100 users)

I need to display this data in a HTML file in a tabular format.
Kindly help me.

  • 4 Contributors
  • 3 Replies
  • 193 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by inkrajesh

Dani AI

Generated

Nice thread — and rightly pointed to XSLT and mentioned Ajax. For a small set of records (about 100 users) a lightweight client-side approach is often the quickest way to get a table on the page without writing an XSLT. A couple of important notes first: if those XML records contain real passwords do not render them in plaintext (mask or omit them and keep passwords hashed on the server). Also ensure the XML is well-formed and served over HTTP (browsers block many file:// requests).

A practical pattern is: (1) give the page a simple table scaffold, (2) fetch the XML, (3) parse it with DOMParser, (4) build table rows. The example below assumes each user is wrapped in a <User> element with child <Username> and <Password> tags; adapt the selectors if your XML structure differs.

<table id="users">
  <thead><tr><th>Username</th><th>Password</th></tr></thead>
  <tbody></tbody>
</table>

<script>
function escapeHTML(s){
  var map = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'};
  return String(s).replace(/[&<>"']/g, function(c){ return map[c]; });
}

fetch('users.xml')
  .then(function(res){
    if (!res.ok) throw new Error(res.statusText);
    return res.text();
  })
  .then(function(text){
    var xml = new DOMParser().parseFromString(text, 'application/xml');
    var rows = xml.querySelectorAll('User'); // adapt if your element is different
    var tbody = document.querySelector('#users tbody');
    rows.forEach(function(r){
      var un = r.querySelector('Username'); var pw = r.querySelector('Password');
      var user = un ? un.textContent.trim() : '';
      var pass = pw ? pw.textContent.trim() : '';
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>' + escapeHTML(user) + '</td><td>' + escapeHTML(pass) + '</td>';
      tbody.appendChild(tr);
    });
  })
  .catch(function(err){ console.error('Load/parse error:', err); });
</script>

Troubleshooting tips: watch for CORS and MIME-type issues, confirm a single root element in the XML, and check the browser console for parse errors. If broad browser compatibility or stronger security is required, transform or render the XML on the server (server-side templates or an XSLT transform) rather than relying on client-side rendering — that aligns with the XSLT advice from and while avoiding browser quirks.

Recommended Answers

All 3 Replies

Member Avatar for g8trGTO

Try creating an XSLT (XML style) file and most browsers will properly render the XM. There are lots of tutorials on the web on this. Hope that helps.

Member Avatar for bwhiti

If you know javascript you could use Ajax. This will give you the ability of updating just those fields with out having to call the whole page if you wish.

Member Avatar for inkrajesh

Hi Gody,

You can use XSLT to format the pages like the way you want

Refer to and find the formatting.

Remember to include the reference to your XSLT file you created in the xml

The sample xslt file will be like this...........


<?xmlversion="1.0"encoding="iso-8859-1"?>
<xsl:stylesheetversion="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:templatematch="/">
<html>
<body>
<h2>My page</h2>
<tableborder="1">
<trbgcolor="#9acd32">
<th>Date</th>
<th>Purpose</th>
</tr>
<xsl:for-eachselect="SalesVisit/Details">

<tr>
<td>
<xsl:value-ofselect="Date"/>
</td>
<td>
<xsl:value-ofselect="Purpose"/>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

MY Raw xml file before formatting was like this...

<?xmlversion="1.0"encoding="UTF-8"?>
<?xml-stylesheettype="text/xsl" href="XSLTFile.xsl"?>
<SalesVisit>
<Details>
<Date>1/1/2006</Date>
<Purpose>Sales Visist 1</Purpose>
</Details>
<Details>
<Date>2/1/2006</Date>
<Purpose>Sales Visist 2</Purpose>
</Details>
<Details>
<Date>3/1/2006</Date>
<Purpose>Sales Visist 3</Purpose>
</Details>
<Details>
<Date>4/1/2006</Date>
<Purpose>Sales Visist 4</Purpose>
</Details>
</SalesVisit>


by Rajesh C Medackel, TVM, India

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.