How to find/extract data from xml with jQuery

jquery, xml

Solution

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>

Problem

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!

Original source