How do I pull a xml data into html table using jquery?

Question

I am working on ASP.NET project. There I want to pull a xml data into html table using jquery ? Here is the files,

employee.xml,

<?xml version="1.0" encoding="utf-8" ?>
    <employeedetails>
    <Employee>
    <Name>"Indhu"</Name>
    <ID>"571367"</ID>
    <Designation>"Programmer Analyst"</Designation>
    </Employee>
    <Employee>
    <Name>"Swetha"</Name>
    <ID>"568877"</ID>
    <Designation>"Analyst"</Designation>
    </Employee>
    <Employee>
    <Name>"Vibisha"</Name>
    <ID>"568879"</ID>
    <Designation>"Senior Analyst"</Designation>
    </Employee>
    </employeedetails>

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('<tr>');
$(tb_employee).append('<td>'+name+'</td>');
$(tb_employee).append('<td>'+id+'</td>');
$(tb_employee).append('<td>'+designation+'</td>');
$(tb_employee).append('<tr>');
});
)}
});
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmployeeDetails_XML._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Extract and Read XML Data Using jQuery and Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tb_employee">
<tr>
<th>NAME</th>
<th>ID</th>
<th>DESIGNATION</th>
</tr>
</table>
</div>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/employee.xml">
</asp:XmlDataSource>
</form>
</body>
</html>

This is my code. I could not pull xml data into html table. How can I do this ?

Please help me...

You are not using the correct selector $(tb_employee) should be $('#tb_employee') — Ben Lonsdale
– Ben Lonsdale, Commented Jun 29, 2017 at 16:03

gaetanoM · Accepted Answer · 2017-06-29 16:18:04Z

Your issue is here:

$(tb_employee).append('<tr>');
$(tb_employee).append('<td>'+name+'</td>');
$(tb_employee).append('<td>'+id+'</td>');
$(tb_employee).append('<td>'+designation+'</td>');
$(tb_employee).append('<tr>');

A way to create and append a new row is:

$(tb_employee).append(
     $('<tr/>').append($('<td/>', {text: name}))
        .append($('<td/>', {text: id}))
        .append($('<td/>', {text: designation}))
);

var xmlStr ='<?xml version="1.0" encoding="utf-8" ?>\
          <employeedetails>\
          <Employee>\
          <Name>"Indhu"</Name>\
          <ID>"571367"</ID>\
          <Designation>"Programmer Analyst"</Designation>\
          </Employee>\
          <Employee>\
          <Name>"Swetha"</Name>\
          <ID>"568877"</ID>\
          <Designation>"Analyst"</Designation>\
          </Employee>\
          <Employee>\
          <Name>"Vibisha"</Name>\
          <ID>"568879"</ID>\
          <Designation>"Senior Analyst"</Designation>\
          </Employee>\
          </employeedetails>';
  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(
                      $('<tr/>').append($('<td/>', {text: name}))
                              .append($('<td/>', {text: id}))
                              .append($('<td/>', {text: designation}))
              );
          });
      //}
  //});

table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}

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


<table id="tb_employee">
    <tr>
        <th>NAME</th>
        <th>ID</th>
        <th>DESIGNATION</th>
    </tr>
</table>

Collectives™ on Stack Overflow

How do I pull a xml data into html table using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related