0

我有以下情况：

我得到了项目信息的 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>
...

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

谢谢。

4

2 回答 2

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

改进点：

  1. 在 for-in 循环中使用 hasOwnProperty
于 2012-07-19T13:15:08.390 回答
0

给你一个算法！

  1. 首先，您必须对对象列表进行排序

  2. 有一个名为 PreviousClassification 的变量。

  3. 遍历对象

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

  1. 如果没有，请关闭classificationDiv 并为新的 Div 打开一个新的ClassificationDivClassification

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

于 2012-07-19T13:11:39.643 回答