时间戳

首页 > 解决方案 > ajax下的嵌套订单列表

javascript - ajax下的嵌套订单列表

问题描述

我有两个来自两个不同 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)
         .....

谁能帮我弄清楚我做错了什么？PS我这里只放了一部分代码。如果您对我的要求感到困惑，请随时问我！非常感谢！！！！

标签： javascripthtmlajaxxml

解决方案

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

假设您有以下数据：

类别.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>

产品.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>

有用的链接：

推荐阅读