Geek Answers Handbook

How to find / extract data from xml using jQuery

I am trying to extract the values ​​of StateLongName and StateShortName from xml below.

I know there should 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 is what I have tried.

Load the xml from above into the JFS xml variable name.

Try # 1

 $(xml).find("TABLE").each(function() { var stateName = $(this).find("StateLongName").innerText; var stateCode = $(this).find("StateShortName").innerText; });

Try # 1 finds nothing 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 to find matches, however stateName and stateCode remain 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, but there should be a better way. Please enlighten me.

Thank you for your time!

+6
jquery xml
source share
2 answers

It is case sensitive, use "Table" as follows:

 $(xml).find("Table").each(function() { var stateName = $(this).find("StateLongName").text(); var stateCode = $(this).find("StateShortName").text(); });

Update: Sorry, this one was a bit puzzled, don't use <table> , it treats it as html, creating <tbody> , and things get unfamiliar from there :) If you changed it to just attach something else, 'll work, here the example with it has changed to <tabl> : http://jsfiddle.net/Yvetc/

Here is the full 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>
+7
source share
 $.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(

xml sample 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 Gate</street> <city>Idoto</city> <province>Anambra</province> </address> </label> </labels>
+2
source share

More articles:


All Articles