title: JSON + jQuery - Filtering Issues
body: <p>I hate to bother you all, but I cannot get my filters functioning. I've posted the code I'm working on below without any of my attempts in there (the dropdown menu and checkboxes have no functions assigned to them) to make things slightly easier to see.</p>
  
  <p>I want the user to be able to click the checkboxes and select countries from a dropdown on the left that will filter all of the results.</p>
  
  <p>I want the dropdown to populate automatically with unique country fields (field.COUNTRY). This is a problem within the problem - I tried jQuery.unique and .filter on the country list, and then .filter actions via jQuery on the data field results.</p>
  
  <p>Basically, I'm probably just too fried to see what I'm doing wrong, but maybe one of you smart peoples can see a solution through my messy code.</p>
  
  <p>Any help is greatly appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
          $.getJSON("https://api.myjson.com/bins/7g9yf.json", function(data){
            
              $.each(data, function(i, field){
                var name = field.NAME;
                var url = field.URL;
                var customs = field.CUSTOMS;
                var ones = field.ONE_OFFS;
                var originals = field.ORIGINAL_MODELS;
                var order = field.ORDER_ONLINE;
                var city = field.CITY;
                var state = field.STATE;
                var country = field.COUNTRY;
                var luthier = field.LUTHIER;
                var email = field.EMAIL;
                var tel = field.TEL;
                var store = field.STORE;
                var info = field.INFO;
                var specialty = field.SPECIALTY;
                var school = field.SCHOOL;
                  $("#show-data").append("&lt;div class='LD_item_wrap'&gt;  &lt;div class='LD_1'&gt;&lt;h3&gt;" + name + "&lt;/h3&gt;&lt;/div&gt;&lt;div class='LD_2'&gt;" + "&lt;a class='LD_lnk' rel='nofollow' href='" + url + "'" + "target='_blank'&gt;" + url + "&lt;/a&gt;" + "&lt;/div&gt;  &lt;div class='LD_lctn'&gt;&lt;div class='LD_7'&gt;" + city + "&lt;/div&gt;&lt;div class='LD_8'&gt;" + state + "&lt;/div&gt;&lt;div class='LD_9'&gt;" + country + "&lt;/div&gt;  &lt;/div&gt;&lt;div class='LD_3'&gt;Custom Builds?&lt;span&gt;" + customs + "&lt;/span&gt;&lt;/div&gt;&lt;div class='LD_4'&gt;One-Offs?&lt;span&gt;" + ones + "&lt;/span&gt;&lt;/div&gt;&lt;div class='LD_5'&gt;Original Models?&lt;span&gt;" + originals + "&lt;/span&gt;&lt;/div&gt;&lt;div class='LD_6'&gt;Order Online?&lt;span&gt;" + order + "&lt;/span&gt;&lt;/div&gt;  &lt;div class='LD_cntct_div'&gt;Contact Details&lt;/div&gt;  &lt;div class='LD_cnt_cnt'&gt;  &lt;div class='LD_10'&gt;&lt;sup&gt;Luthier&lt;/sup&gt;&lt;span&gt;" + luthier + "&lt;/span&gt;&lt;/div&gt;    &lt;div class='LD_11'&gt;&lt;sup&gt;Email&lt;/sup&gt;&lt;span&gt;" + "&lt;a class='LD_MF' href='mailto:" + email + "' target='_top'&gt;" + email + "&lt;/a&gt;&lt;/span&gt;" + "&lt;/div&gt;&lt;div class='LD_12'&gt;&lt;sup&gt;Tel&lt;/sup&gt;&lt;span&gt;" + tel + "&lt;/span&gt;&lt;/div&gt; &lt;div class='LD_13'&gt;&lt;sup&gt;Shop&lt;/sup&gt;&lt;span&gt;" + store + "&lt;/span&gt;&lt;/div&gt;  &lt;div class='LD_14'&gt;&lt;sup&gt;Info&lt;/sup&gt;&lt;span&gt;" + info + "&lt;/span&gt;&lt;/div&gt;  &lt;div class='LD_15'&gt;&lt;sup&gt;Specialty&lt;/sup&gt;&lt;span&gt;" + specialty + "&lt;/span&gt;&lt;/div&gt;&lt;div class='LD_16'&gt;&lt;sup&gt;School/Course&lt;/sup&gt;&lt;span&gt;" + school + "&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;");
          });
            $('.LD_MF').each(function() {
    var that = $(this);
    that.attr('href', that.attr('href').replace('[x.x]', '.').replace('[x..x]', '@'));
    that.html(that.html().replace('[x.x]', '.').replace('[x..x]', '@'));
  });
  
  var check = $('.LD_item_wrap div');
  for (var i = 0; i &lt;= check.length; i++) {
         if ($(check[i]).text() == '') {
               $(check[i]).css('display','none');
            }
       }
  
            
  var check3 = $('.LD_item_wrap div span');
  var check2 = check3.parent();
  for (var i = 0; i &lt;= check3.length; i++) {
         if ($(check3[i]).text() == '') {
               $(check2[i]).css('display','none');
            }
       }
  
  var yn = $('.LD_item_wrap div span');
  for (var i = 0; i &lt;= yn.length; i++) {
         if ($(yn[i]).text() == 'Yes') {
               $(yn[i]).html('&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" width="15px" height="15px"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points="293.333,135.04 190.08,240.213 137.173,187.093 108.8,215.467 192.213,298.667 326.187,168.747   " fill="#91DC5A"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;g&gt;&lt;path d="M213.333,0C95.513,0,0,95.513,0,213.333s95.513,213.333,213.333,213.333s213.333-95.513,213.333-213.333    S331.154,0,213.333,0z M213.333,388.053c-96.495,0-174.72-78.225-174.72-174.72s78.225-174.72,174.72-174.72    c96.446,0.117,174.602,78.273,174.72,174.72C388.053,309.829,309.829,388.053,213.333,388.053z" fill="#91DC5A"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;');
            }
       }
  
  for (var i = 0; i &lt;= yn.length; i++) {
         if ($(yn[i]).text() == 'No') {
               $(yn[i]).html('&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" width="15px" height="15px"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points="303.147,153.813 272.853,123.52 213.333,183.253 153.813,123.52 123.52,153.813 183.253,213.333 123.52,272.853     153.813,303.147 213.333,243.413 272.853,303.147 303.147,272.853 243.413,213.333   " fill="#D80027"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;g&gt;&lt;path d="M213.333,0C95.513,0,0,95.513,0,213.333s95.513,213.333,213.333,213.333s213.333-95.513,213.333-213.333    S331.154,0,213.333,0z M213.333,388.053c-96.495,0-174.72-78.225-174.72-174.72s78.225-174.72,174.72-174.72    c96.446,0.117,174.602,78.273,174.72,174.72C388.053,309.829,309.829,388.053,213.333,388.053z" fill="#D80027"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;');
            }
       }
  
            $('.LD_14').hide();
      });
    
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin:0; padding:10px 0;}
  /* Testing JSON Data Manipulation */
  #LDWrap {border:1px #666 solid; width:600px; height:420px; margin-left:auto; margin-right:auto; padding:0; border-radius:20px; box-shadow:1px 1px 1px #ccc; font-family:Lato; color:#666;}
  #LDX {width:600px; height:50px; text-align:center;}
  #LDX h2 {font-size:20px; text-transform:uppercase; padding:0; margin:0; line-height:50px;}
  #LDX h2 span {color:#cc4c4c;}
  #LDMen {width:120px; height:400px; float:left;}
  #LDInf {width:480px; height:400px; float:left;}
  #LD_scrl {width:100%; text-align:center; line-height:20px;font-size:12px;color:#ccc;}
  #LD_filters {font-size:10px;padding:4px;}
  #LD_filters select {display:block;padding:0;margin:0 0 10px 0; outline:none;}
  #LD_filters span {margin-left:6px;}
  #LD_filters &gt; * {display:inline-block;margin:4px 0; line-height:10px;}
  
  #LDMen h4 {color:#cc4c4c;text-align:center;}
  #show-data {height:calc(100% - 80px); overflow:scroll; margin:10px; padding:5px; box-shadow:1px 1px 1px #ccc inset;}
  
  
  
  
  
  .LD_item_wrap a {color:#000;text-decoration:none;}
  .LD_item_wrap a:hover {color:#cc4c4c;}
  .LD_item_wrap a:active {color:#fff;}
  .LD_item_wrap {margin:20px auto; width:calc(100% - 12px); height:auto;border:1px #ccc dotted;padding:5px;}
  .LD_item_wrap div {margin:0;padding:0; line-height:20px;}
  .LD_item_wrap div span svg {padding-right:10px; float:right;}
  .LD_cntct_div {width:100%; border-bottom:1px #ccc dotted;margin:10px 0px 5px 0px !important; color:#ccc; font-size:12px; text-align:center;}
  .LD_cnt_cnt {text-align:center;}
  .LD_cnt_cnt sup {float:left;font-size:9px;line-height:20px;text-transform:uppercase;}
  
  .LD_1 {text-align:center;}
  .LD_1 h3 {font-weight:bold; margin:0; color:#cc4c4c;}
  .LD_2 {font-size:12px; text-align:center;}
  .LD_lctn {text-align:center; font-size:12px; text-transform:uppercase; margin-bottom:3px !important; font-weight:bold;}
  .LD_7 {display:inline-block;}
  .LD_7:after {content:'•';padding:0 4px;}
  .LD_8 {display:inline-block;}
  .LD_8:after {content:'•';padding:0 4px;}
  .LD_9 {display:inline-block;}
  .LD_3 {}
  .LD_4 {}
  .LD_5 {}
  .LD_6 {}
  .LD_10 {}
  .LD_11 {font-size:12px;}
  .LD_12 {}
  .LD_13 {}
  .LD_14 {}
  .LD_15 {}
  .LD_16 {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="LDWrap"&gt;
    &lt;div id="LDX"&gt;&lt;h2&gt;Custom Guitar Builders &lt;span&gt;Directory&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;
    &lt;div id="LDMen"&gt;
      &lt;h4&gt;Filter Results&lt;/h4&gt;
  &lt;div id="LD_filters"&gt;
    &lt;span&gt;Country:&lt;/span&gt;
    &lt;select&gt;
    &lt;option value="All"&gt;All&lt;/option&gt;
    &lt;option value="USA"&gt;USA&lt;/option&gt;
    &lt;option value="Spain"&gt;Spain&lt;/option&gt;
    &lt;option value="Denmark"&gt;Denmark&lt;/option&gt;
    &lt;option value="UK"&gt;UK&lt;/option&gt;
  &lt;/select&gt;
    &lt;input type="checkbox" name="filt_customs" value="customs"&gt;&lt;span&gt;Custom Builders&lt;/span&gt;&lt;br&gt;
    &lt;input type="checkbox" name="filt_originals" value="originals"&gt;&lt;span&gt;Original Models&lt;/span&gt;&lt;br&gt;
      &lt;input type="checkbox" name="filt_orders" value="orders"&gt;&lt;span&gt;Online Orders&lt;/span&gt;&lt;br&gt;
      &lt;/div&gt; &lt;!---filters---&gt;
    &lt;/div&gt;
    &lt;div id="LDInf"&gt;
      &lt;div id="show-data"&gt;&lt;/div&gt;
      &lt;div id="LD_scrl"&gt;Scroll Down&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>