jQuery AJAX success function with nested .each() - data is undefined

Right, this might be a bit difficult to explain.

I have a jQuery AJAX request that's reading an XML file with a layout similar to this:

<root>
    <nodes>
        <node type="typeOne" name="nodeNameOne" />
        <node type="typeOne" name="nodeNameTwo" />
        <node type="typeTwo" name="nodeNameThree" />
        <node type="typeThree" name="nodeNameFour" />
        <node type="typeFour" name="nodeNameFive" />
    </nodes>

    <otherNodes>
        <otherNode name="nodeNameOne">Some value</otherNode>
        <otherNode name="nodeNameTwo">Some value</otherNode>
    </otherNodes>
</root>

This isn't something I have control over; the XML files are being generated by a third-party tool.

What I want to do is read the value of the <node>s' name attribute, then use that to pull the value out of the corresponding <otherNode>, if it exists.

This is what I've got in my success callback function:

function ParseFile(data, status, request){
    var types = ['typeOne', 'typeTwo']; //I don't care about all the <node>s

    alert(typeof data); //displays "object"

    types.each(function(entry, index){
        alert(typeof data); //displays "object"
        var typeNodes = jQuery(data).find('node[type="'+entry+'"]');

        typeNodes.each(function(){
            aler开发者_Go百科t(typeof data); //displays "undefined"
            var name = jQuery(this).attr('name');
            /* The data object is undefined once you get inside this loop,
               so the following doesn't work. */
            var otherNode = jQuery(data).find('otherNode[name="'+name+'"]').text();
        });
    });
}

The problem is, I can't seem to access the data variable from within the second .else() loop. Even if I declare a variable inside the first, var newData = data;, newData is undefined as well.

The reason this isn't working is that the jQuery function modifies data and tries to set it to the html fragment that it thinks that you've passed in. However, you didn't pass valid html into it, so it sets it to undefined. You need to copy data to another variable, rather than just set a refernce.

Try doing

var myData = data.substr(0);

var types = ['typeOne', 'typeTwo']; 

types is not a jQuery object, it is an array, that you can iterate through with the each function.

// This will not work 

types.each(function(entry, index){
  //... iteration processing
}; 

For types variable use a for loop or convert it to a jQuery object.

This isn't exactly an answer to your specific question, but you could use map() to simplify that down to something stemming from this:

// Returns an array of ["Some value", "Some value", ""]
$xml.find('node[type=typeOne], node[type=typeTwo]').map(function() { 
  return $xml.find('otherNode[name=' + this.getAttribute('name') + ']').text(); 
});

That assumes $xml is a variable containing the jQuery-wrapped XML. For example, I defined it like this at the console to test:

var $xml = $('<root>
  <nodes>
    <node type="typeOne" name="nodeNameOne" />
    <node type="typeOne" name="nodeNameTwo" />
    <node type="typeTwo" name="nodeNameThree" />
    <node type="typeThree" name="nodeNameFour" />
    <node type="typeFour" name="nodeNameFive" />
  </nodes>

  <otherNodes>
    <otherNode name="nodeNameOne">Some value</otherNode>
    <otherNode name="nodeNameTwo">Some value</otherNode>
  </otherNodes>
</root>');