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

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

假设您有以下数据：

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

有用的链接：

ajax

1 个答案: