Question

我有以下情况：

我获取了项目信息的JSON数据。我解析它并在HTML中使用它数据格式如下：

{"classification": "books","category": "comics","Code": "ITBCBAT08","Title": ...}, ...

但是，现在我需要根据各自的分类和类别组合将它们放在部分下。

在解析结果时，我尝试在数组中获取一组唯一的分类，并在另一个数组中获取类别：

if ( $.inArray(this.classification, rO.classification) == -1 )
     rO.classification.push(this.classification);

if ( $.inArray(this.category, rO.category) == -1 )
     rO.category.push(this.category);

上面我在打印HTML时检查过，但是无法进行组合。

以上是上述示例：http://jsfiddle.net/ZGp2z/2/

输出类似

<div class="ClassificationName">

    <h2>Classification Name</h2>

    <div class="categoryName">
       <h3>Category Name</h3>
           <!-- Items that have the above Classification and Category -->
    </div>

    <div class="categoryName2">
       <h3>Category Name2</h3>
           <!-- Items that have the above Classification and Category2 -->
    </div>

</div>
...

有人可以帮我解决这个问题。

感谢。

Answer 1

我看到了解决这个问题的两种可能方法：

1：传递一次数据并将其组织在多维对象中并在其上循环以输出结果。

2：对于每个项目，如果尚未创建分类和类别，则创建并附加到DOM，然后将项目名称附加到特定位置。但这将是一大堆DOM操作，可能效率较低。

这是首先重新格式化数据的可能解决方案（1）。

小提琴：http://jsfiddle.net/ZGp2z/17/

sO = [
        {
            "classification": "books",
            "category": "comics",
            "Code": "ITBCBAT08",
            "Title": "Dark Knight"
        },
        {
            "classification": "cds",
            "category": "comics",
            "Code": "ITCCCSUP02",
            "Title": "Superman"
        },
        {
            "classification": "books",
            "category": "literature",
            "Code": "ITBLII01",
            "Title": "To Kill a Mockingbird"
        }
    ];

     // Result = $.parseJSON(sO);
     Result = sO;

var html = "", data = {}, cls, cat;

for(var i in sO) {
    cls = sO[i].classification;
    cat = sO[i].category;

    if(typeof data[cls] === "undefined") {
        data[cls] = [];
    }

    if(typeof data[cls][cat] === "undefined") {
        data[cls][cat] = [];
    }

    data[cls][cat].push(sO[i]);
}

for(var cls in data) {
    html += "<div class=\"main\" style='display:block' >";
    html += "<h2>" + cls  + "</h2>";

    for(var cat in data[cls]) {
        html += "<h3>" + cat  + "</h3>"

        for(var item in data[cls][cat]) {
            html += "<p>" + data[cls][cat][item].Title + "</p>";   
        }
    }

    html += "</div>";
    html += "<div class=\"clr\"></div>";
}
$('#test').append(html);

改善点：

在for-in循环中使用hasOwnProperty

Answer 2

应该给你一个算法！

首先，您必须对对象列表进行排序
有一个名为PreviousClassification的变量。
遍历对象

4.如果previousClassification为空或等于currentClassification。然后只需附加类别名称，然后将currentClassification分配给previousClassification

如果没有，请关闭classification Div并为新Classification

Classification

如果索引值等于length-1，则关闭classificationDiv

使用javascript根据值将项目分组到两个级别

2 个答案: