How to find/extract data from xml with jQuery
I'm trying to extract the StateLongName and StateShortName values from the xml below.
I know there has to be a simple elegant way to do this with jQuery.
<NewDataSet>
<Table>
<StateLongName开发者_运维知识库>Alabama</StateLongName>
<StateShortName>AL</StateShortName>
</Table>
<Table>
<StateLongName>Alaska</StateLongName>
<StateShortName>AK</StateShortName>
</Table>
...elments removed for brevity
</NewDataSet>
Here's what I've tried.
Load the xml from above into a Javascript variable name xml.
Try #1
$(xml).find("TABLE").each(function()
{
var stateName = $(this).find("StateLongName").innerText;
var stateCode = $(this).find("StateShortName").innerText;
});
Try #1 doesn't find anything and never goes inside to load the stateName and stateCode variables.
Try #2
$(xml).find("StateLongName").each(function()
{
var stateName = $(this).find("StateLongName").innerText;
var stateCode = $(this).find("StateShortName").innerText;
});
Try #2 does find matches, however the stateName and stateCode are left undefined.
Try #3
$(xml).find("StateLongName").each(function()
{
var stateName = $($(xml).find('StateLongName').parent()[0].innerHTML)[1].data;
var stateCode = $($(xml).find('StateLongName').parent()[0].innerHTML)[5].data;
});
Try #3 works but there has to be a better way. Please enlighten me.
Thanks for you time!
It's case sensitive, use "Table" like this:
$(xml).find("Table").each(function() {
var stateName = $(this).find("StateLongName").text();
var stateCode = $(this).find("StateShortName").text();
});
Update: Sorry this one was a bit baffling, don't use <table>, it treats it as html creating a <tbody> and things get stranger from there:) If you changed it to just abut anything else, it'll work, here's an example with it changed to <tabl>: http://jsfiddle.net/Yvetc/
Here's a full bare test page:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var xml="<NewDataSet><Tabl><stateLongName>Alabama</stateLongName><stateShortName>AL</StateShortName></Tabl><Tabl><StateLongName>Alaska</StateLongName><StateShortName>AK</StateShortName></Tabl></NewDataSet>";
$(xml).find("Tabl").each(function() {
var stateName = $(this).find("StateLongName").text();
var stateCode = $(this).find("StateShortName").text();
alert("State: " + stateName + " Code: " + stateCode);
});
</script>
</head>
<body>
</body>
</html>
$.ajax({
type: "GET",
url: "labels.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('label').each(function(){
var id_text = $(this).attr('id')
var name_text = $(this).find('name').text()
$('<li></li>')
.html(name_text + ' (' + id_text + ')')
.appendTo('#update-target ol');
}); //close each(
}
}); //close $.ajax(
sample xml for this:
<?xml version="1.0" encoding="iso-8859-1"?>
<labels>
<label id='ep' added="2003-06-10">
<name>Ezra Pound</name>
<address>
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id='tse' added="2003-06-20">
<name>Thomas Eliot</name>
<address>
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id="lh" added="2004-11-01">
<name>Langston Hughes</name>
<address>
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
<label id="co" added="2004-11-15">
<name>Christopher Okigbo</name>
<address>
<street>7 Heaven's Gate</street>
<city>Idoto</city>
<province>Anambra</province>
</address>
</label>
</labels>
加载中,请稍侯......
精彩评论