Store data to array coming from XML file in ajax request - ajax

Question

I have one XML file from which I need to get data & store them in an array. Somehow array is not being created expectedly. I've used each function to loop through the xml file.
Here's my code:
AJAX Request
$.ajax({
type: "POST",
url: "products.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Products').each(function(){
var proid = $(this).find('ProductID').text();
var proname = $(this).find('ProductName').text();
var catid = $(this).find('CategoryID').text();
var qua=$(this).find('QuantityPerUnit').text();
var price=$(this).find('UnitPrice').text();
var products = new Array();
for(i=0;i<=20;i++){
products[i]=new Array();
products[i][0]= proid;
products[i][1]= proname;
products[i][2]= catid;
products[i][3]= qua;
products[i][4]= price;
}
});
}
alert(products[0][2]); // Nothing happens
});
Sample of XML File
<ProductsRoot>
<Products>
<ProductID>1</ProductID>
<ProductName>Chai</ProductName>
<CategoryID>1</CategoryID>
<QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
<UnitPrice>18</UnitPrice>
</Products>
</ProductsRoot>
When I loop through each function, I expect it to work like for loop but something's that I can not see. Can anyone spot the mistake? Your help will be greatly appreciated.

Answer 1

Try this:
$.ajax({
type: "POST",
url: "products.xml",
dataType: "xml",
success: function(xml) {
var products = new Array();
$(xml).find('Products').each(function(){
var proid = $(this).find('ProductID').text();
var proname = $(this).find('ProductName').text();
var catid = $(this).find('CategoryID').text();
var qua=$(this).find('QuantityPerUnit').text();
var price=$(this).find('UnitPrice').text();
for(i=0;i<=20;i++){
products[i]=new Array();
products[i][0]= proid;
products[i][1]= proname;
products[i][2]= catid;
products[i][3]= qua;
products[i][4]= price;
}
});
alert(products[0][2]);
}
});
}