title: Sorting JSON contents by Category
body: <p>I have a JSON file setup like this:</p>
  
  <pre><code>{
      "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
          }, 
  
  ..........
  
          }
      ]
  }
  </code></pre>
  
  <p>I am trying to sort the categories by 'Genre', i.e. each time I click a 'genre' link, all the products are cleared from the table and only the items having a Genre of 'x' will be displayed.</p>
  
  <p>This is what I tried:</p>
  
  <pre><code>&lt;script&gt;
  
          function Categories(Genre)
          {
              $.getJSON('products.json', function(data) {
                  $(".products").empty();
                  $(data.Products.Genre).each(function(index, item){
                  if(Genre == this.Genre){
  
                      $('&lt;div/&gt;', {'class':'productname',text:item.Name}).append(
                              $('&lt;div/&gt;', {'class':'productdetails', text:'Album: '+item.Album}),
                              $('&lt;div/&gt;', {'class':'productdetails'}).append($('&lt;img&gt;').attr({src:item.Source,title:item.Name,alt:item.Name,class:'productimage'})),
                              $('&lt;div/&gt;', {'class':'productdetails', text:'Genre: '+item.Genre}),
                              $('&lt;div/&gt;', {'class':'productdetails', text:'Price: '+item.Price}),
                              $('&lt;div/&gt;', {'class':'productdetails', text:'Quantity: '+item.Quantity}),
                              $('&lt;div/&gt;', {'class':'productdetails', text:'Tracks: '+item.Tracks}),
                              $('&lt;div/&gt;').append(
                                      $('&lt;button /&gt;', {'class':'productbutton'})
                                              .text('Add To Cart.')
                                              .click(function(){
                                                  $.fn.SaveToCart(i,item.Name, item.Album, item.Price);
                                              })
                              )
                      ).appendTo("#products");
                  }
              });
  
  
          });
  
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="categories"&gt;
  
  
          &lt;h2&gt;Categories&lt;/h2&gt;
          &lt;ul&gt;
  
              &lt;li&gt;&lt;a class=""  onclick="Categories('Rock')"&gt;&lt;span&gt;Rock&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=""  onclick="Categories('Electro')"&gt;&lt;span&gt;Electro&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=""  onclick="Categories('Hip Hop')"&gt;&lt;span&gt;Hip Hop&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=""  onclick="Categories('Ambient')"&gt;&lt;span&gt;Ambient&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=""  onclick="Categories('Electronica')"&gt;&lt;span&gt;Electronica&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=""  onclick="Categories('Future Garage')"&gt;&lt;span&gt;Future Garage&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;            &lt;br&gt;&lt;br&gt;&lt;hr&gt;&lt;hr&gt;
  &lt;div class="products"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I click on a link, nothing is happening.</p>