Retrieve xml data in table format in html

Question

I want to retrieve XML data in HTML in table format. I tried using ajax but data is not coming. Here what might be the issue can anyone help me out. I new to ajax. Feel free to tell anything wrong in my code. Below is the image I want to like this

 $(document).ready(function() {

        $(window).load(function () {
            $.ajax({
                type: 'GET',
                url: '2.xml',
                dataType: 'xml',
                success: function myFunction(xml) {
       var i;
       var xmlDoc = xml.responseXML;
       var table="<tr><th>Artist</th><th>Title</th></tr>";
       var x = xmlDoc.getElementsByTagName("Row");
       for (i = 0; i <x.length; i++) { 
         table += "<tr><td>" +
         x[i].getElementsByTagName("Process")[0].childNodes[0].nodeValue +
         "</td><td>" +
         x[i].getElementsByTagName("Product")[0].childNodes[0].nodeValue +
         "</td></tr>" +
          x[i].getElementsByTagName("Operation")[0].childNodes[0].nodeValue +
         "</td></tr>" +
          x[i].getElementsByTagName("Description")[0].childNodes[0].nodeValue +
         "</td></tr>" +
          x[i].getElementsByTagName("Batch")[0].childNodes[0].nodeValue +
         "</td></tr>" +
          x[i].getElementsByTagName("QTY")[0].childNodes[0].nodeValue +
         "</td></tr>" +
          x[i].getElementsByTagName("PlannedSchedule")[0].childNodes[0].nodeValue +
         "</td></tr>" +
          x[i].getElementsByTagName("ActualSchedule")[0].childNodes[0].nodeValue +
         "</td></tr>" +
         x[i].getElementsByTagName("Status")[0].childNodes[0].nodeValue +
         "</td></tr>";

       }
       document.getElementById("demo").innerHTML = table;
     }
            });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo"></table>

XML:

  <Rowsets>
  <Rowset>
      <Row>
      <Process>70787863</Process>
      <Product>600033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>259</Batch>
      <QTY>999</QTY>
   </Row>
   <Row>
      <Process>707863</Process>
      <Product>6033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>249</Batch>
      <QTY>99</QTY>
   </Row>
   </Rowset>
   </Rowsets>

score 1 · Answer 1 · answered Jul 02 '18 at 09:14

I Think the problem with your code is you are getting undefined in xmlDoc..

You can achieve it with the following code.

HTML

<table id="demo">
<thead>
    <th>Product</th>
    <th>Process</th>
    <th>Operation</th>
    <th>Description</th>
    <th>Batch</th>
    <th>Qty</th>
</thead>
<tbody></tbody>

JS

$.ajax({
    type: 'GET',
    url: 'data.xml',//Your xml data
    dataType: 'xml',
    success: function(xml){
        $(xml).find("Row").each(function(){
            var Product = $( this ).find( 'Process' ).text()
            var Process = $( this ).find( 'Product' ).text()
            var Operation = $( this ).find( 'Operation' ).text()
            var Description = $( this ).find( 'Description' ).text()
            var Batch = $( this ).find( 'Batch' ).text()
            var Qty = $( this ).find( 'Qty' ).text()
            $('#demo tbody').append('<tr><td>'+Product+'</td><td>'+Process+'</td><td>'+Operation+'</td><td>'+Description+'</td><td>'+Batch+'</td><td>'+Qty+'</td></tr>')

        });
    }
    })

The code is working fine at my end..Did u include the jquery and changed the url? — Hussain, Jul 02 '18 at 09:30
https://stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat checkout the link for the error — Hussain, Jul 02 '18 at 09:35

score 0 · Answer 2 · answered Jul 02 '18 at 08:14

0

You should really look in to JQuery Datatables, I use them all the time to fill a table with Ajax data.

JQuery Datatables

answered Jul 02 '18 at 08:14

Thomas Verhoeven

13
1
6

Retrieve xml data in table format in html

2 Answers2