title: Filtering objects from external array to create a list, using jQuery AJAX and $.grep
body: <p>I don't know the best way to explain this... I'm just learning AJAX and this is a real challenge for me.</p>
  
  <p>Basically, I want to store a big array of items (objects) inside a json file and then, dynamically generate multiple lists <em>depending on some filters</em>; each array object's property works as a filter.
  For this I'm using jQuery <code>$.grep()</code> function.</p>
  
  <p>The problem is that I'm might be missing something, because although the json file is successfully loaded, the "filtering" is not being done.</p>
  
  <p>Look at my first try (without ajax), <strong>it works</strong> just like I want:
  <a href="http://jsfiddle.net/Frondor/p2hgrk8h/2/" rel="nofollow">http://jsfiddle.net/Frondor/p2hgrk8h/2/</a></p>
  
  <p>But if I try to do the same, using AJAX, then <strong>it doesn't work</strong>:
  <a href="http://jsfiddle.net/Frondor/6a2Lzof6/" rel="nofollow">http://jsfiddle.net/Frondor/6a2Lzof6/</a></p>
  
  <p>Here's the jQuery code (with comments):</p>
  
  <pre><code>$(document).ready(function () {
      $.ajax({
          url: 'https://gist.githubusercontent.com/Frondor/422b87c6b64ab9927c9b/raw/d5ae5b4d6dd03c083549609d2b45edc7b2ed726f/gistfile1.json',
          //dataType: 'json',
          success: function (items) {
  
              console.log(items); //check the array is loaded
  
              var hand = $.grep(items, function (obj) { 
                  //filter only items with hand:0, hand:1 and rf:1
                  return obj.hand &lt;= '1' &amp;&amp; obj.rf === '1'; 
                  //at least the first item should match this, doesnt work
              });
  
              //create new array with filtered items
              var lista = $.map(hand, function (item) {
                  console.log(item);
                  return '&lt;li&gt;' + item.name + '&lt;/li&gt;';
              });
  
              $("#manoderecha ul").empty().html(lista);
          }
  
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="manoderecha"&gt;
      &lt;ul&gt;&lt;li&gt;This item shouldn't be displayed&lt;/li&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>