title: How to sort results list by data id from json file?
body: <p>So everything in my naming tool works as far as displaying the names from a json file. What I can't get to work, is when the data id's tied into the choices from the radio buttons and select drop downs to filter and only display the names that have those data id's associated with them. Here is my code:</p>
  
  <p>HTML for radio buttons:</p>
  
  <pre><code>&lt;form class="dnt-tool" id="dnt" name="dnt"&gt;
      &lt;div class="dnt-overlay"&gt;
          &lt;input id="male" name="gender" type="radio" value="Male" /&gt;
          &lt;label for="male"&gt;Male&lt;/label&gt; 
          &lt;input data-id="594" id="female" name="gender" type="radio" value="Female" /&gt;
          &lt;label for="female"&gt;Female&lt;/label&gt; 
          &lt;input checked="checked" data-id="0" id="all" name="gender" type="radio" value="All" /&gt;
          &lt;label for="all"&gt;All&lt;/label&gt; 
          &lt;select&gt;
              &lt;option data-id="0" value="/dog-name-finder/"&gt;Select a Category&lt;/option&gt;
              &lt;option data-id="0" value="/dog-name-finder/"&gt;All&lt;/option&gt;
              &lt;option data-id="601" value="/dog-name-finder/baby/"&gt;Baby&lt;/option&gt;
              &lt;option data-id="602" value="/dog-name-finder/celebrity/"&gt;Celebrity&lt;/option&gt;
              &lt;option data-id="603" value="/dog-name-finder/cute/"&gt;Cute&lt;/option&gt;
              &lt;option data-id="598" value="/dog-name-finder/disney/"&gt;Disney&lt;/option&gt;
              &lt;option data-id="600" value="/dog-name-finder/fancy/"&gt;Fancy&lt;/option&gt;
              &lt;option data-id="605" value="/dog-name-finder/most-popular/"&gt;Most Popular&lt;/option&gt;
              &lt;option data-id="599" value="/dog-name-finder/presidential/"&gt;Presidential&lt;/option&gt;
              &lt;option data-id="597" value="/dog-name-finder/techy/"&gt;Techy&lt;/option&gt;
              &lt;option data-id="596" value="/dog-name-finder/television/"&gt;Television&lt;/option&gt;
              &lt;option data-id="606" value="/dog-name-finder/trendy/"&gt;Trendy&lt;/option&gt;
              &lt;option data-id="595" value="/dog-name-finder/unisex/"&gt;Unisex&lt;/option&gt;
              &lt;option data-id="604" value="/dog-name-finder/video-game/"&gt;Video Game&lt;/option&gt; 
          &lt;/select&gt;
      &lt;/div&gt;&lt;!-- end of dnt-overlay --&gt;
      &lt;div class="dnt-btn"&gt;
          &lt;button id="submit" type="submit"&gt;Show Names&lt;/button&gt;
      &lt;/div&gt;&lt;!-- end of dnt btn --&gt;
  &lt;/form&gt;&lt;!-- end of dnt-tool --&gt;
  </code></pre>
  
  <p>Here is the jquery that displays results in a popup(the pop up works fine):</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          $('#dnt').submit(function(e){
              var cat_id = $('.dnt-overlay &gt; select &gt; option:selected').data('id') || 0;
              var cat_title = $('.dnt-overlay &gt; select &gt; option:selected').text() || 'All';
              if (cat_id === 0)
              {
                  cat_title = 'All';
              }
              var dnt_url = $('.dnt-overlay &gt; select &gt; option:selected').val() || '/dog-name-finder/';
              var gender = $('.dnt-overlay &gt; [name=gender]:checked').data('id') || 0;
              var gender_title = $('.dnt-overlay &gt; [name=gender]:checked').val() || 'All';
              var title = cat_title;
              var html = '';
  
              var params = '';
  
              if(window.innerWidth &lt;= 320)
              {
                  params = '?limit=18';
              }
              else
              {
                  params = '?limit=21';
              }
  
  
              if (cat_id &gt; 0)
              {
                  params += '&amp;' + 'cat_id=' + cat_id;
              }
  
              if (gender &gt; 0 &amp;&amp; cat_title != 'Gender Agnostic' &amp;&amp; cat_title != 'Unisex' &amp;&amp; cat_title != 'Male' &amp;&amp; cat_title != 'Female')
              {
                  title += ' ' + gender_title;
                  params += '&amp;' + 'gender=' + gender;
                  if(cat_title == 'All')
                  {
                      dnt_url += gender_title.toLowerCase() + '/';
                  }
                  else
                  {
                      dnt_url += '?gender=' + gender_title.charAt(0).toLowerCase();
                  }
              }
              title += ' Dog Names';
  
              $('#dnt-popup &gt; h1').text(title);       
  
              e.preventDefault(); // We don't need to send the form, because it's all local
              if($('#male').is(':checked')) { // Check if male is checked
                  $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-female').addClass('dnt-male');
              } 
              else if($('#female').is(':checked')) { // Check if female is checked 
                  $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-male').addClass('dnt-female');
              } 
              else if($('#all').is(':checked')) { // Check if all is checked
                  $('#dnt-popup').removeClass('dnt-female').removeClass('dnt-male').addClass('dnt-all');
              }
              $.ajax({
                 type : 'GET',
                 dataType: "json",
                url: "dnt.json" + params,
              })
  
              .done(function( data ) {
  
                  $.each(data, function( index, value ) {
                      if(index == 21){
                          return false;
                      }
  
                      html +='&lt;li&gt;' + value.Name + '&lt;/li&gt;';
                  });
  
                  $('#dnt-popup &gt; .results-list &gt; ul').html(html);
  
                  $.magnificPopup.open({ // open pop up for male
                      items: {
                          src: '#dnt-popup',
                          type: 'inline'
  
                      },//item
                          mainClass: 'animated slideInRight'
                  });///popup open
              }); 
           });///submit function
         });///submit function 
      &lt;/script&gt;
  </code></pre>
  
  <p>This is some of the data from my json file:</p>
  
  <pre><code>       [
            {
               "Name":"Aaliyah",
               "Female":594,
               "Baby":601
             },
             {
                "Name":"Abby",
                "Female":594
              },
              {
                 "Name":"Abe",
                 "Male":593,
                 "Video Games":604
              },
              {
                 "Name":"Abigail",
                 "Female":594,
                 "Baby":601
              },
              {
                 "Name":"Abu",
                 "Male":593,
                 "Disney":598
              },
              {
                 "Name":"Ace",
                 "Male":593,
                 "Fancy":600,
                 "Cool":611
               }
           ]
  </code></pre>
  
  <p>Is there something I'm missing here? Please help.</p>