javascript - JSON コンテンツをカテゴリ別に並べ替える

Question

次のような JSON ファイルのセットアップがあります。

{
    "Products": [
        {   "Name": "Pink Floyd",
            "Album": "The Best Of Pink Floyd: A Foot In The Door",
            "Label": "EMI UK",
            "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
            "Price": "16.40",
            "Genre": "Rock"   ,
            "Source": "http://upload.wikimedia.org/wikipedia/en/thumb/3/38/AFootInTheDoorPinkFloyd.jpg/220px-AFootInTheDoorPinkFloyd.jpg",
            "Quantity": 10

        },
        {
            "Name": "Depeche Mode",
            "Album": "A Question Of Time",
            "Label": "Mute",
            "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
            "Price": "4.68" ,
            "Genre": "Rock",
            "Source": "http://dmremix.be/images/AQuestionOfTime.jpg",
            "Quantity": 10
        }, 

..........

        }
    ]
}

カテゴリを「ジャンル」でソートしようとしています。つまり、「ジャンル」リンクをクリックするたびに、すべての製品がテーブルから消去され、ジャンルが「x」のアイテムのみが表示されます。

これは私が試したものです：

<script>

        function Categories(Genre)
        {
            $.getJSON('products.json', function(data) {
                $(".products").empty();
                $(data.Products.Genre).each(function(index, item){
                if(Genre == this.Genre){

                    $('<div/>', {'class':'productname',text:item.Name}).append(
                            $('<div/>', {'class':'productdetails', text:'Album: '+item.Album}),
                            $('<div/>', {'class':'productdetails'}).append($('<img>').attr({src:item.Source,title:item.Name,alt:item.Name,class:'productimage'})),
                            $('<div/>', {'class':'productdetails', text:'Genre: '+item.Genre}),
                            $('<div/>', {'class':'productdetails', text:'Price: '+item.Price}),
                            $('<div/>', {'class':'productdetails', text:'Quantity: '+item.Quantity}),
                            $('<div/>', {'class':'productdetails', text:'Tracks: '+item.Tracks}),
                            $('<div/>').append(
                                    $('<button />', {'class':'productbutton'})
                                            .text('Add To Cart.')
                                            .click(function(){
                                                $.fn.SaveToCart(i,item.Name, item.Album, item.Price);
                                            })
                            )
                    ).appendTo("#products");
                }
            });


        });

        }
    </script>

HTML:

<div class="categories">


        <h2>Categories</h2>
        <ul>

            <li><a class=""  onclick="Categories('Rock')"><span>Rock</span></a></li>
            <li><a class=""  onclick="Categories('Electro')"><span>Electro</span></a></li>
            <li><a class=""  onclick="Categories('Hip Hop')"><span>Hip Hop</span></a></li>
            <li><a class=""  onclick="Categories('Ambient')"><span>Ambient</span></a></li>
            <li><a class=""  onclick="Categories('Electronica')"><span>Electronica</span></a></li>
            <li><a class=""  onclick="Categories('Future Garage')"><span>Future Garage</span></a></li>

        </ul>
    </div>            <br><br><hr><hr>
<div class="products"></div>

リンクをクリックしても何も起こりません。

Answer 1

JavaScript コードのいくつかのエラーを修正しました。

1）各製品をループしているため、$(data.Products).each(function..

2)if(Genre == item.Genre){ジャンルをきちんとチェックする

やってみて：

<script>

        function Categories(Genre)
        {
            $.getJSON('products.json', function(data) {
                $(".products").empty();
                $(data.Products).each(function(index, item){
                if(Genre == item.Genre){

                    $('<div/>', {'class':'productname',text:item.Name}).append(
                            $('<div/>', {'class':'productdetails', text:'Album: '+item.Album}),
                            $('<div/>', {'class':'productdetails'}).append($('<img>').attr({src:item.Source,title:item.Name,alt:item.Name,class:'productimage'})),
                            $('<div/>', {'class':'productdetails', text:'Genre: '+item.Genre}),
                            $('<div/>', {'class':'productdetails', text:'Price: '+item.Price}),
                            $('<div/>', {'class':'productdetails', text:'Quantity: '+item.Quantity}),
                            $('<div/>', {'class':'productdetails', text:'Tracks: '+item.Tracks}),
                            $('<div/>').append(
                                    $('<button />', {'class':'productbutton'})
                                            .text('Add To Cart.')
                                            .click(function(){
                                                $.fn.SaveToCart(i,item.Name, item.Album, item.Price);
                                            })
                            )
                    ).appendTo("#products");
                }
            });


        });

        }
    </script>

Answer 2

そこで修正されたいくつかのエラー：

• data.Products の代わりに data.Products.Genre をループします。

• これの代わりにアイテムと比較する

• HTML に従って、存在しない #products の代わりに .products に追加します。

JSON をデータに置き換えること、および JSFiddle で使用できない $.getJSON 呼び出しを忘れないでください。window.Categories を削除し、Categories をグローバル スコープに配置するだけです。

フィドル:

http://jsfiddle.net/NA5tt/2/

HTML:

<div class="categories">
    <h2>Categories</h2>
    <ul>
        <li><a class=""  onclick="Categories('Rock')"><span>Rock</span></a></li>
        <li><a class=""  onclick="Categories('Electro')"><span>Electro</span></a></li>
        <li><a class=""  onclick="Categories('Hip Hop')"><span>Hip Hop</span></a></li>
        <li><a class=""  onclick="Categories('Ambient')"><span>Ambient</span></a></li>
        <li><a class=""  onclick="Categories('Electronica')"><span>Electronica</span></a></li>
        <li><a class=""  onclick="Categories('Future Garage')"><span>Future Garage</span></a></li>
    </ul>
</div>
<br />
<br />
<hr />
<hr />
<div class="products"></div>

もちろん、静的JSON変数を使用しています...

JS:

var JSON = {
    "Products": [
        {   "Name": "Pink Floyd",
         "Album": "The Best Of Pink Floyd: A Foot In The Door",
         "Label": "EMI UK",
         "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
         "Price": "16.40",
         "Genre": "Rock"   ,
         "Source": "http://upload.wikimedia.org/wikipedia/en/thumb/3/38/AFootInTheDoorPinkFloyd.jpg/220px-AFootInTheDoorPinkFloyd.jpg",
         "Quantity": 10

        },
        {
            "Name": "Depeche Mode",
            "Album": "A Question Of Time",
            "Label": "Mute",
            "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
            "Price": "4.68" ,
            "Genre": "Rock",
            "Source": "http://dmremix.be/images/AQuestionOfTime.jpg",
            "Quantity": 10
        }
    ]
}

// window is JUST for the JSFiddle cause I'm in a jQuery scope.
window.Categories = function (Genre) {
    $(".products").empty();
    // Loop on JSON.Products
    $(JSON.Products).each(function(index, item) {
        // Compare to item instead of this
        if(Genre == item.Genre) {
            $('<div/>', {'class':'productname'}).text(item.Name).append(
                $('<div/>', {'class':'productdetails', text:'Album: '+item.Album}),
                $('<div/>', {'class':'productdetails'}).append($('<img>').attr({src:item.Source,title:item.Name,alt:item.Name,class:'productimage'})),
                $('<div/>', {'class':'productdetails', text:'Genre: '+item.Genre}),
                $('<div/>', {'class':'productdetails', text:'Price: '+item.Price}),
                $('<div/>', {'class':'productdetails', text:'Quantity: '+item.Quantity}),
                $('<div/>', {'class':'productdetails', text:'Tracks: '+item.Tracks}),
                $('<div/>').append(
                    $('<button />', {'class':'productbutton'})
                    .text('Add To Cart.')
                    .click(function(){
                        $.fn.SaveToCart(i,item.Name, item.Album, item.Price);
                    })
                )
            ).appendTo(".products"); // .products instead of #products cause you're using a class
        }
    });
};

Answer 3

データ オブジェクトを並べ替える方法は次のとおりです。オブジェクトを並べ替えて、テーブルを再作成するだけです。

var obj={
    "Products": [
        {   "Name": "Pink Floyd",
            "Album": "The Best Of Pink Floyd: A Foot In The Door",
            "Label": "EMI UK",
            "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
            "Price": "16.40",
            "Genre": "Rock"   ,
            "Source": "http://upload.wikimedia.org/wikipedia/en/thumb/3/38/AFootInTheDoorPinkFloyd.jpg/220px-AFootInTheDoorPinkFloyd.jpg",
            "Quantity": 10

        },
        {
            "Name": "Depeche Mode",
            "Album": "A Question Of Time",
            "Label": "Mute",
            "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
            "Price": "4.68" ,
            "Genre": "Rock",
            "Source": "http://dmremix.be/images/AQuestionOfTime.jpg",
            "Quantity": 10
        }
    ]
}

keys=["Genre","Name"];//Sorts by Genre then Name
obj.Products.sort(function(a,b){
  var ret=0,i=0;
  while(ret==0&&i<keys.length){
      ret=(a[keys[i]]>b[keys[i]])?1
        :(a[keys[i]]<b[keys[i]])?-1:0;
      i++;
   }
   return ret;
});
console.log(obj.Products)