7

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!

Improve this question
1
  • disregard my answer - I thought your question was more general! Commented Apr 1, 2010 at 19:33

2 Answers 2

Reset to default
8

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I like to define var $this = $(this) when using that value more than once.
Thanks for the quick response Nick. Unfortunately, changing the case still did not find any matches.
It appears that case sensitivity does NOT apply to the .find() method. Any case version of $(xml).find("statelongname") will match, while any character case version of $(xml).find("table") will NOT match.
is this behavior browser specific? Nick's original example works for me at jsfiddle.net/k9yfa on Chrome.
@Anurag - It works because I changed the xml to not contain <table> but rather <tabl>, which seemed to mess things up quite a bit in the document fragment.
|
2 
$.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>
Improve this answer

Comments