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 var...

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)