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>