Friday, 14 March 2014

Jquery to iterate XML POST response and populate table

<order>
<product>
<product_no>111</product_no>
<product_name>Camera</product_name>
<product_date>12-01-2013</product_date>
</product>
<product>
<product_no>1121</product_no>
<product_name>Mobile</product_name>
<product_date>14-01-2013</product_date>
</product>
<product>
<product_no>121</product_no>
<product_name>Bat</product_name>
<product_date>12-06-2013</product_date>
</product>
</order>
$.ajax({
 type : "POST",
 headers : {
 "Content-Type" : "application/xml"
 },
 url : 'rest/getorder',
 dataType : "xml",
 data : ''
  + $('#username').val() + ''
  + $('#password').val() + '',
 success : function(response) {  
   $(response).find('product').each(function() {
   $('#tbody').append(
    $('').append(
     $('').text(
      $(this).find('product_no').text()
     ),
     $('').text(
      $(this).find('product_name').text()
     ),
     $('').text(
      $(this).find('product_date').text()
     )
    )
   );
  
  });

  },
 error : function(response) {
  alert('error:' + response);
 }
 });
 
 <table cellpadding="5" cellspacing="5"
  style="border: 1px solid #ccc; background: #F1F6F6">
  <thead>
   <tr>
    <th>Product No</th>
    <th>Product Name</th>
    <th>Date</th>
   </tr>
  </thead>
  <tbody id="tbody"></tbody>
 </table>

Get the source code from here

No comments:

Post a Comment

Share the post