Using AJAX to loop through Dynamic XML Nodes and inject into a set of h2 elements using jQuery

Question

So, I have a list of nodes in a dynamic XML that is cached on a server. Using Ajax, I loop through the particular nodes to return a string each time:

XML:

<?xml version="1.0"?>
<Products>
    <Product>
        <ItemName>String</ItemName>
    </Product>
    <Product>
        <ItemName>String</ItemName>
    </Product>
    <Product>
        <ItemName>String</ItemName>
    </Product>
<Products>

jQuery:

$.ajax({
type: "GET",
url: '/services/Scraper.aspx',
success: function(data) {
    $(data).find('Product').each(function() {

        var itemSrc = $(this).find('ItemName').text();

    });
}
});

How do I go about injecting each one of those strings in order into my H2 tag below (assuming there can be more than three XML nodes and/or HTML H2 tags?

<div class="itemLoc">
    <h2></h2>
</div>
<div class="itemLoc">
    <h2></h2>
</div>
<div class="itemLoc">
    <h2></h2>
</div>

Any help would be great! Thanks!

Answer 1

how about using XSLT instead of javascript for processing? http://www.w3schools.com/xsl/default.asp

this is exactly what it's intended for (transforming XML to some other format)

i know it's not what you asked but in case you weren't aware :-)

Answer 2

Thanks guys, but I figured it out:

I added an index to the loop and then set that index to the location of the h2:

$(data).find('Product').each(function(i) {     
    var itemDescSrc = $(this).find('ItemName').text();
    var itemDescLoc = $('div.itemLoc h2');
    itemDescLoc.eq(i).text(itemDescSrc);
});