Getting fetching reading retrieving xml node value/data using jquery asp.net

Posted by on July 22, 2010 Leave a comment (0) Go to comments

Introduction:
In this article,i am going to explain about how to retrieving the xml node value/data using jquery.

Main:
Here i am going to use one xml file named Employees.xml,

<?xml version="1.0" encoding="utf-8" ?>
<Employees>
  <Employee>
    <EmpId>101</EmpId>
    <name>
      <firstname>Ann</first-name>
      <lastname>Jerold</last-name>
    </name>
    <address>
      <street>
        22/10 peter avenue
      </street>
      <city>
        Dallas
      </city>
      <state>
        NJ
      </state>
    </address>    
   </Employee>
 
    <Employee>
    <EmpId>102</EmpId>
    <name>
      <firstname>Peter</first-name>
      <lastname>Burm</last-name>
    </name>
    <address>
      <street>
        223/10 Blur avenue
      </street>
      <city>
        Dallas
      </city>
      <state>
        NJ
      </state>
    </address>    
   </Employee>
</Employees>

The jQuery code to import the information stored in the XML tag firstname and display it in the form of list items, in the current web page, then looks like this:

$(document).ready(function() {
  $('#submit').click(function () {
    $.ajax({
      type:"GET",
      url:"Employees.xml",
      dataType:"xml",
      success: function (sturec) {
        var Emp="<ul>";
        $(sturec).find('Employees').each(function(){
          var name = $(this).find('firstname').text()
          Emp+="<li>"+name+"</li>";
        });
        Emp+="</ul>";
        $('#message').append(Emp);
      }
    });
    return false;
  });
});
 
$(document).ready(function() {
  $('#submit').click(function () {
    $.ajax({
      type:"GET",
      url:"Employees.xml",
      dataType:"xml",
      success: function (sturec) {
        var Emp="<table border='1'>";
        $(sturec).find('Employees').each(function(){
          var roll = $(this).find('EmpId').text()
          var fname = $(this).find('firstname').text()
          var lname = $(this).find('lastname').text()
          Emp+="<tr><td>"+roll+"</td><td>"+fname+" "+lname+"</td></tr>";
        });
        Emp+="</table>";
        $('#message').append(Emp);
      }
    });
    return false;
  });
});