stackoom
  简体   繁体   中英

JSON + jQuery - Filtering Issues

 原文  2017-01-16 00:53:12  0   2    javascript/ jquery/ json

Question

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.

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.

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.

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.

Any help is greatly appreciated! 

 $(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("<div class='LD_item_wrap'> <div class='LD_1'><h3>" + name + "</h3></div><div class='LD_2'>" + "<a class='LD_lnk' rel='nofollow' href='" + url + "'" + "target='_blank'>" + url + "</a>" + "</div> <div class='LD_lctn'><div class='LD_7'>" + city + "</div><div class='LD_8'>" + state + "</div><div class='LD_9'>" + country + "</div> </div><div class='LD_3'>Custom Builds?<span>" + customs + "</span></div><div class='LD_4'>One-Offs?<span>" + ones + "</span></div><div class='LD_5'>Original Models?<span>" + originals + "</span></div><div class='LD_6'>Order Online?<span>" + order + "</span></div> <div class='LD_cntct_div'>Contact Details</div> <div class='LD_cnt_cnt'> <div class='LD_10'><sup>Luthier</sup><span>" + luthier + "</span></div> <div class='LD_11'><sup>Email</sup><span>" + "<a class='LD_MF' href='mailto:" + email + "' target='_top'>" + email + "</a></span>" + "</div><div class='LD_12'><sup>Tel</sup><span>" + tel + "</span></div> <div class='LD_13'><sup>Shop</sup><span>" + store + "</span></div> <div class='LD_14'><sup>Info</sup><span>" + info + "</span></div> <div class='LD_15'><sup>Specialty</sup><span>" + specialty + "</span></div><div class='LD_16'><sup>School/Course</sup><span>" + school + "</span></div></div></div>"); }); $('.LD_MF').each(function() { var that = $(this); that.attr('href', that.attr('href').replace('[xx]', '.').replace('[x..x]', '@')); that.html(that.html().replace('[xx]', '.').replace('[x..x]', '@')); }); var check = $('.LD_item_wrap div'); for (var i = 0; i <= 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 <= check3.length; i++) { if ($(check3[i]).text() == '') { $(check2[i]).css('display','none'); } } var yn = $('.LD_item_wrap div span'); for (var i = 0; i <= yn.length; i++) { if ($(yn[i]).text() == 'Yes') { $(yn[i]).html('<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"><g><g><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"/></g></g><g><g><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"/></g></g></svg>'); } } for (var i = 0; i <= yn.length; i++) { if ($(yn[i]).text() == 'No') { $(yn[i]).html('<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"><g><g><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"/></g></g><g><g><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"/></g></g></svg>'); } } $('.LD_14').hide(); }); }); 
 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 > * {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 {} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="LDWrap"> <div id="LDX"><h2>Custom Guitar Builders <span>Directory</span></h2></div> <div id="LDMen"> <h4>Filter Results</h4> <div id="LD_filters"> <span>Country:</span> <select> <option value="All">All</option> <option value="USA">USA</option> <option value="Spain">Spain</option> <option value="Denmark">Denmark</option> <option value="UK">UK</option> </select> <input type="checkbox" name="filt_customs" value="customs"><span>Custom Builders</span><br> <input type="checkbox" name="filt_originals" value="originals"><span>Original Models</span><br> <input type="checkbox" name="filt_orders" value="orders"><span>Online Orders</span><br> </div> <!---filters---> </div> <div id="LDInf"> <div id="show-data"></div> <div id="LD_scrl">Scroll Down</div> </div> </div>

2 answers

solution1
 1  2017-01-16 02:44:39

Here is an option to create dropdown of unique countries from the returned data. Not aiming for efficient way but does the job. 

$(document).ready(function () {
    var uniqueElements = []

    function CheckIfExists(field) {
        var exists = false;
        $.each(uniqueElements, function (i2, field2) {
            if (field2.COUNTRY == field.COUNTRY) {
                exists = true;
                return true;
            };
        });
        return exists;
    }

    $.getJSON("https://api.myjson.com/bins/7g9yf.json", function (data) {
        $.each(data, function (i, field) {
            if (!CheckIfExists(field)) {
                uniqueElements.push(field)
            }
        });
        $('select').empty();
        $('select').append($('<option>', {
                value : 'All',
                text : 'All'
            }))
        $.each(uniqueElements, function (i, item) {
            $('LD_filters select').append($('<option>', {
                    value : item.COUNTRY,
                    text : item.COUNTRY
                }));
        });

        /*
        Rest of your code
         */

    });

});

solution2
 1 ACCPTED  2017-01-16 03:01:08

Updates:

HTML: add this IDs to these inputs 

<select id="countryFilter">
  <option value="All">All</option>
  <option value="USA">USA</option>
  //...
</select>
<input id="customsFilter" type="checkbox" name="filt_customs" value="customs">
<input id="originalsFilter" type="checkbox" name="filt_originals" value="originals">
<input id="orderFilter" type="checkbox" name="filt_orders" value="orders">

Javascript: Add an event listener to the inputs above. Add classes to .LD_item_wrap divs when creating them to serve for filtering. 

$(document).ready(function() {
        // Event listenr for the change event on all the input elements.
        $("#countryFilter, #customsFilter, #originalsFilter, #orderFilter").on("change", function() {
            // retrieving their value
            var country = $("#countryFilter").val().toLowerCase();
            var customs = $("#customsFilter").is(":checked");
            var originals = $("#originalsFilter").is(":checked");
            var order = $("#orderFilter").is(":checked");

            // generating a selector that will show only the element matching the criterias chosen by the user
            var selector = "";
            if (country != "all") selector += ".filter-country-" + country;
            if (customs) selector += ".filter-customs";
            if (originals) selector += ".filter-originals";
            if (order) selector += ".filter-order";

            if (selector.length == 0)
                selector = ".LD_item_wrap";
            else
                selector = ".LD_item_wrap" + selector;

            // hide all .LD_item_wrap elements
            $(".LD_item_wrap").hide();
            // and show only the selected ones
            $(selector).show();
        });

        $.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;

                // generating the classes that will serve for filtering
                var classString = "filter-country-" + country.toLowerCase();
                if (customs == "Yes") classString += " filter-customs";
                if (originals == "Yes") classString += " filter-originals";
                if (order == "Yes") classString += " filter-order";

                // insert the classString into .LD_item_wrap div's class
                $("#show-data").append("<div class='LD_item_wrap " + classString + "'>  <div class='LD_1'><h3>" + name + "</...

RESULT: 

 $(document).ready(function() { $("#countryFilter, #customsFilter, #originalsFilter, #orderFilter").on("change", function() { var country = $("#countryFilter").val().toLowerCase(); var customs = $("#customsFilter").is(":checked"); var originals = $("#originalsFilter").is(":checked"); var order = $("#orderFilter").is(":checked"); var selector = ""; if (country != "all") selector += ".filter-country-" + country; if (customs) selector += ".filter-customs"; if (originals) selector += ".filter-originals"; if (order) selector += ".filter-order"; if (selector.length == 0) selector = ".LD_item_wrap"; else selector = ".LD_item_wrap" + selector; $(".LD_item_wrap").hide(); $(selector).show(); }); $.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; var classString = "filter-country-" + country.toLowerCase(); if (customs == "Yes") classString += " filter-customs"; if (originals == "Yes") classString += " filter-originals"; if (order == "Yes") classString += " filter-order"; $("#show-data").append("<div class='LD_item_wrap " + classString + "'> <div class='LD_1'><h3>" + name + "</h3></div><div class='LD_2'>" + "<a class='LD_lnk' rel='nofollow' href='" + url + "'" + "target='_blank'>" + url + "</a>" + "</div> <div class='LD_lctn'><div class='LD_7'>" + city + "</div><div class='LD_8'>" + state + "</div><div class='LD_9'>" + country + "</div> </div><div class='LD_3'>Custom Builds?<span>" + customs + "</span></div><div class='LD_4'>One-Offs?<span>" + ones + "</span></div><div class='LD_5'>Original Models?<span>" + originals + "</span></div><div class='LD_6'>Order Online?<span>" + order + "</span></div> <div class='LD_cntct_div'>Contact Details</div> <div class='LD_cnt_cnt'> <div class='LD_10'><sup>Luthier</sup><span>" + luthier + "</span></div> <div class='LD_11'><sup>Email</sup><span>" + "<a class='LD_MF' href='mailto:" + email + "' target='_top'>" + email + "</a></span>" + "</div><div class='LD_12'><sup>Tel</sup><span>" + tel + "</span></div> <div class='LD_13'><sup>Shop</sup><span>" + store + "</span></div> <div class='LD_14'><sup>Info</sup><span>" + info + "</span></div> <div class='LD_15'><sup>Specialty</sup><span>" + specialty + "</span></div><div class='LD_16'><sup>School/Course</sup><span>" + school + "</span></div></div></div>"); }); $('.LD_MF').each(function() { var that = $(this); that.attr('href', that.attr('href').replace('[xx]', '.').replace('[x..x]', '@')); that.html(that.html().replace('[xx]', '.').replace('[x..x]', '@')); }); var check = $('.LD_item_wrap div'); for (var i = 0; i <= 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 <= check3.length; i++) { if ($(check3[i]).text() == '') { $(check2[i]).css('display', 'none'); } } var yn = $('.LD_item_wrap div span'); for (var i = 0; i <= yn.length; i++) { if ($(yn[i]).text() == 'Yes') { $(yn[i]).html('<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"><g><g><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"/></g></g><g><g><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"/></g></g></svg>'); } } for (var i = 0; i <= yn.length; i++) { if ($(yn[i]).text() == 'No') { $(yn[i]).html('<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"><g><g><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"/></g></g><g><g><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"/></g></g></svg>'); } } $('.LD_14').hide(); }); }); 
 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 > * {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 {} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="LDWrap"> <div id="LDX"><h2>Custom Guitar Builders <span>Directory</span></h2></div> <div id="LDMen"> <h4>Filter Results</h4> <div id="LD_filters"> <span>Country:</span> <select id="countryFilter"> <option value="All">All</option> <option value="USA">USA</option> <option value="Spain">Spain</option> <option value="Denmark">Denmark</option> <option value="UK">UK</option> </select> <input id="customsFilter" type="checkbox" name="filt_customs" value="customs"><span>Custom Builders</span><br> <input id="originalsFilter" type="checkbox" name="filt_originals" value="originals"><span>Original Models</span><br> <input id="orderFilter" type="checkbox" name="filt_orders" value="orders"><span>Online Orders</span><br> </div> <!---filters---> </div> <div id="LDInf"> <div id="show-data"></div> <div id="LD_scrl">Scroll Down</div> </div> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Filtering JSON reply in jQuery Filtering JSON using jQuery Json Filtering in jquery jquery json to select issues jQuery Mobile JSON issues Issues parsing JSON with JQuery/Ajax Issues in json.stringify in jquery Filtering JSON data in jQuery or vanilla JavaScript “Filtering” second dropdown box with jquery and json data jQuery Isotope issues when filtering with a select box and url hash
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM