Due to the increase in popularity of Web 2.0 applications and web services it has become increasingly important to be able to parse XML from the client browser.Parsing is not the easiest thing till the JavaScript libraries that supports XML made their way.
With jQuery, when you receive an XML from a callback (usually thro’ Ajax) which is basically a DOM (document object model) that jQuery can traverse seamlessly and efficiently to get the data you need.
we are using jQuery to parse XML due to its ubiquity& for cross browser compatibility.
The below xml file is used for reference.
<?xml version="1.0" encoding="utf-8" ?>
<country>
<state>
<city>Bangalore</city>
<id>24378</id>
</state>
<state>
<city>Chennai</city>
<id>42378</id>
</state>
<state>
<city>Mumbai</city>
<id>324782</id>
</state>
<state>
<city>Hyderabad</city>
<id>6524</id>
</state>
</country>
To parse the xml file we’re going to set up a function that will search each parent element and output the specified child element’s value as text using the find and each statement.The xml data gets parsed on success of ajax callback through parseXml function.Don’t forget to set dataType as “xml” while making an ajax call.
$(this).find(“city”).text() represents the textual value of city by striping the city tags -<city> &</city>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xml parser using jquery</title>
<script type="text/javascript" src="/jquery-min.1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "/statecity.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("state").each(function() {
//Loops through each state & find's respective instance of city & id in the xml file
$("table#Citylist").append('<tr><td>'+ $(this).find("city").text() +'</td><td>'+$(this).find("id").text()+'</td></tr>');
});
}
});
</script>
</head>
<body>
<table id="Citylist">
<tr ><td >City List</td> <td >ID</td><tr>
</table>
</body>
</html>
The output would be displayed as below after parsing the xml file:
| The City List | ID |
| Bangalore | 24378 |
| Chennai | 42378 |
| Mumbai | 324782 |
| Hyderabad | 6524 |
Related posts:
I am a newbie and was trying to traverse a ajax loaded xml file. I am trying to populate all the names and city from it, and if the name is common then i would just append the city for the common name.
my xml file
US
Edward
San bruno
US
Edward
Charleston
I an trying to show it in a format like this
Edward
San Bruno
Charleston
My jquery code looks like this
$.ajax({
type: “GET”,
url: “sheet.xml”,
dataType: “xml”,
success: function(xml) {
$(xml).find(‘detail’).each(function(){
var Pname = $(this).find(‘name’).text();
$(‘ ‘).html(‘‘+name+’‘).appendTo(‘#content’);
if(Pname = $(xml).find(‘name’).each(function(){
var city = $(this).find(‘city’).text();
var full = name + “,”+city;
$(”).html(‘‘+city+’‘).appendTo(‘#content’);
});
I am just not able to loop it again so that I can find the guy with same name but a different city hence placing them together according to different location.
any Help would be appreciated. Thanks in advance..
Very useful and simple, worth a bookmark. Thanks
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah nice..