0

次のシナリオがあります。

商品情報のJSONデータを取得します。私はそれを解析し、HTML で使用します。
データの形式は次のとおりです。

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

ただし、それぞれの分類とカテゴリの組み合わせに従って、セクションの下に配置する必要があります。

results を解析している間、配列内の分類の一意のセットと別の配列内のカテゴリを取得しようとしました:

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

これを解決するには、次の 2 つの方法が考えられます。

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. そうでない場合は、Divを閉じて、新しいDivclassificationを開きます。ClassificationClassification

  2. インデックス値が長さ-1に等しい場合、閉じるclassificationDiv

于 2012-07-19T13:11:39.643 に答える