javascript - Sorting JSON contents by Category -
i have json file setup this:
{ "products": [ { "name": "pink floyd", "album": "the best of pink floyd: foot in door", "label": "emi uk", "tracks":"hey you, see emily play, happiest days of our lives, brick in wall (part 2), have cigar, wish here, time, great gig in sky, money, comfortably numb, high hopes, learning fly, fletcher memorial home, shine on 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, do, stripped, more party, question of time(extended), black celebration" , "price": "4.68" , "genre": "rock", "source": "http://dmremix.be/images/aquestionoftime.jpg", "quantity": 10 }, .......... } ] } i trying sort categories 'genre', i.e. each time click 'genre' link, products cleared table , items having genre of 'x' displayed.
this tried:
<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 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> when click on link, nothing happening.
some errors corrected there :
loop on data.products instead of data.products.genre
compare item instead of this
append .products instead of #products not exists, according html !
don't forget replace json data in stuff, , $.getjson call cannot use in jsfiddle ! , remove window.categories, place categories in global scope.
fiddle:
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> i'm using static json var of course...
js:
var json = { "products": [ { "name": "pink floyd", "album": "the best of pink floyd: foot in door", "label": "emi uk", "tracks":"hey you, see emily play, happiest days of our lives, brick in wall (part 2), have cigar, wish here, time, great gig in sky, money, comfortably numb, high hopes, learning fly, fletcher memorial home, shine on 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, do, stripped, more party, question of time(extended), black celebration" , "price": "4.68" , "genre": "rock", "source": "http://dmremix.be/images/aquestionoftime.jpg", "quantity": 10 } ] } // window jsfiddle cause i'm in jquery scope. window.categories = function (genre) { $(".products").empty(); // loop on json.products $(json.products).each(function(index, item) { // compare item instead of 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 cart.') .click(function(){ $.fn.savetocart(i,item.name, item.album, item.price); }) ) ).appendto(".products"); // .products instead of #products cause you're using class } }); }; 