javascript - ajax下的嵌套订单列表

Question

我有两个来自两个不同 xml 文件的数组，一个存储类别信息，一个存储类别下的产品。它们通过 categoryID 连接。下面是 xml 文件的示例。我读取这些 xml 文件并使用 ajax 保存数据。

 categories.xml
    <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>



products.xml
    <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>

我读了如下两个文件

$.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.food 
  a) product
  b) another product
ii. drink
  a) coke
  b) juice

为此，我在下面的 ajax 中使用了循环

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)
         .....

谁能帮我找出我哪里做错了？附言我这里只放了一部分代码。如果您对我的要求感到困惑，请随时问我!非常感谢!!!!

Answer 1

创建一个数据结构，帮助您更轻松地构建列表。

假设您有以下数据:

类别.xml

<?xml version="1.0" encoding="UTF-8"?>
<Categories>
    <Category>
        <ID>1</ID>
        <Name>Beverages</Name>
        <Description>Soft drinks, coffees, teas, beer, and ale</Description>
    </Category>
    <Category>
        <ID>2</ID>
        <Name>Condiments</Name>
        <Description>Sweet and savory sauces, relishes, spreads, and seasonings</Description>
    </Category>
</Categories>

products.xml

<?xml version="1.0" encoding="UTF-8"?>
<Products>
    <Product>
        <ID>1</ID>
        <Name>Chai</Name>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
        <UnitPrice>18</UnitPrice>
    </Product>
    <Product>
        <ID>2</ID>
        <Name>Chang</Name>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>
        <UnitPrice>19</UnitPrice>
    </Product>
    <Product>
        <ID>3</ID>
        <Name>Chen</Name>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>6 - 20 oz bottles</QuantityPerUnit>
        <UnitPrice>5</UnitPrice>
    </Product>
    <Product>
        <ID>4</ID>
        <Name>Chow</Name>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>12 - 40 oz mustard</QuantityPerUnit>
        <UnitPrice>14</UnitPrice>
    </Product>
</Products>

让我们构建一个对象，其中键是类别 ID，值是类别数据，并带有一个附加字段 products 以保存其所有相关产品。

{
    '1': {
        name: 'Beverages',
        description: 'Soft drinks, coffees, teas, beer, and ale',
        products: [ ... ]
    },
    '2': {
        name: 'Condiments',
        description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
        products: [ ... ]
    }
}

在构建对象时，键很重要，因为当我们迭代产品时，我们将能够轻松地将它们添加到各自类别的 products 数组中，如下所示:

var data = {};

categories.find('Category').each(function () {
    var category = $(this);
    var id = category.find('ID').text();
    data[id] = {
        id: id,
        name: category.find('Name').text(),
        description: category.find('Description').text(),
        products: []
    };
})

products.find('Product').each(function () {
    var product = $(this);
    var categoryId = product.find('CategoryID').text();
    if (data.hasOwnProperty(categoryId)) {
        data[categoryId].products.push({
            id: product.find('ID').text(),
            name: product.find('Name').text(),
            quantityPerUnit: product.find('QuantityPerUnit').text(),
            unitPrice: product.find('UnitPrice').text()
        });
    }
});

有了这个对象后，我们现在可以通过运行两个嵌套循环来构建 HTML。

var list  = '<ol type="i">';
$.each(data, function (i, category) {
    list += '<li>' + category.name
    list += '<ol type="a">';
    $.each(category.products, function (j, product) {
        list += '<li>' + product.name + '</li>';
    });
    list += '</ol>';
    list += '</li>';
})
list += '</ol>';

把一切放在一起

<!-- placeholder to hold list -->
<div id="products"></div>

<script>
$(function () {
    // simplified way to get 2 ajax responses
    $.when(
        $.get('categories.xml'),
        $.get('products.xml')
    ).done(function (catRes, prodRes) {
        var categories = $($.parseXML(catRes[2].responseText)).find('Categories'),
            products = $($.parseXML(prodRes[2].responseText)).find('Products');

        // build a data structure to organize both responses
        var data = {};

        categories.find('Category').each(function () {
            var category = $(this);
            var id = category.find('ID').text();
            data[id] = {
                id: id,
                name: category.find('Name').text(),
                description: category.find('Description').text(),
                products: []
            };
        })

        products.find('Product').each(function () {
            var product = $(this);
            var categoryId = product.find('CategoryID').text();
            if (data.hasOwnProperty(categoryId)) {
                data[categoryId].products.push({
                    id: product.find('ID').text(),
                    name: product.find('Name').text(),
                    quantityPerUnit: product.find('QuantityPerUnit').text(),
                    unitPrice: product.find('UnitPrice').text()
                });
            }
        });

        // build HTML using data structure
        var list  = '<ol type="i">';
        $.each(data, function (i, category) {
            list += '<li>' + category.name
            list += '<ol type="a">';
            $.each(category.products, function (j, product) {
                list += '<li>' + product.name + '</li>';
            });
            list += '</ol>';
            list += '</li>';
        })
        list += '</ol>';

        $('#products').html(list);
    });
});
</script>

有用的链接:

• jQuery.when()

• jQuery.parseXML()

• How to parse XML using jQuery?