I need to pull a xml data into html table using jquery.

Indhu Mathi

9y793

employee.xml

"Indhu"

"571367"

"Programmer Analyst"

"Swetha"

"568877"

"Analyst"

"Vibisha"

"568879"

"Senior Analyst"

script_tbemployeedetails.js

$(document).ready(function(){

$.ajax({

type:'GET',

url:'employee.xml',

dataType:'xml',

success:function(xmlData){

$("Employee",xmlData).each(function(){

String name=$(this).find("Name").text(),

String id=$(this).find("ID").text(),

String designation=$(this).find("Designation").text();

$(tb_employee).append('');

$(tb_employee).append(''+name+'');

$(tb_employee).append(''+id+'');

$(tb_employee).append(''+designation+'');

$(tb_employee).append('');

});

)}

});

}

defaut.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmployeeDetails_XML._Default" %>

Extract and Read XML Data Using jQuery and Ajax

NAME	ID	DESIGNATION

This is my code.I could not pull xml data into html table

Can anyone help to do this

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Abhilash J A9y ago
Your issue is here:
$(tb_employee).append('');
$(tb_employee).append(''+name+'');
$(tb_employee).append(''+id+'');
$(tb_employee).append(''+designation+'');
$(tb_employee).append('');
A way to create and append a new row is:
$(tb_employee).append(
     $('').append($('', {text: name}))
        .append($('', {text: id}))
        .append($('', {text: designation}))
);
var xmlStr ='"1.0" encoding="utf-8" ?>\
          \
          \
          "Indhu"\
          "571367"\
          "Programmer Analyst"\
          \
          \
          "Swetha"\
          "568877"\
          "Analyst"\
          \
          \
          "Vibisha"\
          "568879"\
          "Senior Analyst"\
          \
          ';
  var xmlData = $.parseXML(xmlStr);
  /*
  $.ajax({
      type: 'GET',
      url: '1.xml',
      dataType: 'xml',
      success: function (xmlData) {
      *****/
          $("Employee", xmlData).each(function () {
              var name = $(this).find("Name").text();
              var id = $(this).find("ID").text();
              var designation = $(this).find("Designation").text();
              $(tb_employee).append(
                      $('').append($('', {text: name}))
                              .append($('', {text: id}))
                              .append($('', {text: designation}))
              );
          });
      //}
  //});
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<table id="tb_employee">
    <tr>
        <th>NAMEth>
        <th>IDth>
        <th>DESIGNATIONth>
    tr>
table>
Abhilash J A9y ago
You are not using the correct selector $(tb_employee) should be $('#tb_employee')
Sundaram Subramanian9y ago
Follow as like the below link. This may help. Thanks in advance

https://stackoverflow.com/questions/12647228/from-xml-to-html-table-using-jquery-ajax