AJAX加载XML数据生成嵌套有序列表渲染异常求助

我最近在做一个从XML文件读取分类和产品数据，然后渲染成嵌套有序列表的功能，结果实际渲染出来的结构完全混乱，想请各位帮忙排查下代码问题。

一、数据文件说明 #

我有两个XML文件，categories.xml存分类信息，products.xml存对应分类下的产品，二者通过CategoryID关联，示例内容如下：

categories.xml #

<CategoriesRoot>
  <Categories>
    <CategoryID>1</CategoryID>
    <CategoryName>Beverages</CategoryName>
    <Description>Soft drinks, coffees, teas, beer, and ale</Description>
  </Categories>
  <Categories>
    <CategoryID>2</CategoryID>
    <CategoryName>Condiments</CategoryName>
    <Description>Sweet and savory sauces, relishes, spreads, and seasonings</Description>
  </Categories>
</CategoriesRoot>

products.xml #

<ProductsRoot>
  <Products>
    <ProductID>1</ProductID>
    <ProductName>Chai</ProductName>
    <CategoryID>1</CategoryID>
    <QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
    <UnitPrice>18</UnitPrice>
  </Products>
  <Products>
    <ProductID>2</ProductID>
    <ProductName>Chang</ProductName>
    <CategoryID>1</CategoryID>
    <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>
    <UnitPrice>19</UnitPrice>
  </Products>
</ProductsRoot>

二、AJAX读取数据的代码 #

我用jQuery的AJAX依次读取这两个文件，把数据存入categoryarray和productarray数组：

$.ajax({
  type: 'GET',
  url: 'categories.xml',
  dataType: "xml",
  success: function(data) {
    $(data).find('CategoriesRoot Categories').each(function(i){
      cateid = $(this).find('CategoryID').text();
      catename = $(this).find('CategoryName').text();
      catedescription = $(this).find('Description').text();
      categoryarray[i] = new Array();
      categoryarray[i][0] = cateid;
      categoryarray[i][1] = catename;
      categoryarray[i][2] = catedescription;
    });
    $.ajax({
      type: 'GET',
      url: 'products.xml',
      dataType: "xml",
      success: function(data) {
        $(data).find('ProductsRoot Products').each(function(j){
          proid = $(this).find('ProductID').text();
          proname = $(this).find('ProductName').text();
          catid = $(this).find('CategoryID').text();
          quantity = $(this).find('QuantityPerUnit').text();
          price = $(this).find('UnitPrice').text();
          productarray[j] = new Array();
          productarray[j][0] = proid;
          productarray[j][1] = proname;
          productarray[j][2] = catid;
          productarray[j][3] = quantity;
          productarray[j][4] = price;
        });
        // 渲染列表的循环代码写在这里
      }
    });
  }
});

三、期望的渲染效果 #

我想要渲染成罗马数字开头的分类，每个分类下是字母开头的产品，格式如下：

i. Beverages
  a) Chai
  b) Chang
ii. Condiments
  a) [对应分类下的产品]

四、我写的渲染循环代码 #

为了实现上面的效果，我在AJAX的success回调里写了这段循环：

for(var k=0;k<categoryarray.length;k++){
  if(categoryarray[k][0]!==""){
    $('.cate ol').append('<li id="Cate_' + k + '">'+categoryarray[k][1]+'</li>');
    for(var l=0;l<productarray.length;l++){
      if(categoryarray[k][0]==productarray[l][2]){
        $('#Cate_' + k).append('<ol id="Pro_' + l + '" type="a"></ol>');
        $('#Pro_' + l).append("<li>"+productarray[l][1]+"</li>");
      }
    }
  }
}

五、实际出现的错误 #

结果渲染出来的结构完全混乱，具体表现为：

• 第一个分类下面混入了所有分类的名称和对应产品，顺序重复且毫无规律
• 剩下的七个分类只在列表末尾按ii到viii的顺序列出，完全没有和对应的产品关联起来

错误的渲染示例：

i.Beverages(1st cate)
  a.Chai(1 pro of 1st cate)
  b.Condiments(2nd cate)
    a.Aniseed Syrup(1st pro of 2nd cate)
    b.Confections(3rd cate(no pro under it))
    c.Dairy Products(4th cate(no pro under it))
    d.Grains/Cereals(5th cate)
      a.hamburger bun(1st pro of 5th cate)
      b.Meat/Poultry(6th cate)
        a.beef burger(1st pro of 6th cate)
        b.Produce(7th cate)
        c.Seafood(8th cate)
          a.tiger prawns(1st pro of 8th cate)
          b.cooked prawns(2nd pro of 8th cate)
      a.chicken burger(2nd pro of 7th cate)
      b.Produce(7th cate)
      c.Seafood(8th cate)
.....

真心希望大家能帮我找出代码里的问题，非常感谢！

内容的提问来源于stack exchange，提问作者张剑桥