使用 jQuery 过滤 JSON

Question

我目前正在开发一个 Web 应用程序，并希望合并一个过滤器功能，该功能为用户使用多个选项，然后此过滤器会显示来自 JSON 数组的符合条件的数据。我有一个公平的方法，但似乎无法使过滤正常工作，我认为问题可能出在 jQuery .each() 方法上。

非常感谢您的帮助！这是我目前拥有的。

提前致谢。

HTML 文件

<html>
<head>
    <title>Test Filter</title>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="filter.js"></script>

</head>

<body>

    <label for="weather">Gender</label>
    <select id="weather" name="weather">
        <option value="rain">Rain</option>
        <option value="sun">Sun</option>
        <option value="snow">Snow</option>
    </select>

    <label for="distance"></label>
    <select id="distance" name="distance">
        <option value="0-5 miles">0 - 5 miles</option>
        <option value="6-10 miles">6 - 10 miles</option>
        <option value="11-20 miles">11 - 20 miles</option>
        <option value="21-25 miles">21 - 25 miles</option>
    </select>

    <label for="eventtype">Type of event</label>
    <input id="eventtype" name="eventtype" type="text" />
    <a id="calc" href="#" >Submit</a>

    <div id="eventResult"></div>

</body>

JavaScript 文件

$(document).ready(function() {    

    var obj = {
        "events": [
            {
                "location": "Sheffield",
                "date": "May 13th, 2015",
                "map": "img/leeds_town_hall.jpg",
                "weather": "rain",
                "distance": "0-5 miles",
                "eventtype": "music"
            },
            {
                "location": "Leeds",
                "date": "May 13th, 2015",
                "map": "img/leeds_town_hall.jpg",
                "weather":"sun",
                "distance":"6-10 miles",
                "eventtype":"historical"
            },
            {
                "location": "York",
                "date": "May 13th, 2015",
                "map": "img/leeds_town_hall.jpg",
                "weather":"snow",
                "distance":"11-20 miles",
                "eventtype":"food"
            },
            {
                "location": "Leeds Town Hall",
                "date": "May 13th, 2015",
                "map": "img/leeds_town_hall.jpg",
                "weather":"rain",
                "distance":"21-25 miles",
                "eventtype":"arts"
            },
            {
                "location": "Leeds Town Hall",
                "date": "May 13th, 2015",
                "map": "img/leeds_town_hall.jpg",
                "weather":"sun",
                "distance":"0-5 miles",
                "eventtype":"music"
            },
            {
                "location": "Leeds Town Hall",
                "date": "May 13th, 2015",
                "map": "img/leeds_town_hall.jpg",
                "weather":"snow",
                "distance":"0-5 miles",
                "eventtype":"family"
            }
        ]};


    //Find the value when form is submitted
    $('#calc').click(function(e) {
        e.preventDefault();

        var events = jQuery.grep(obj.events, function(element, index){
            return element.weather && element.distance && element.eventtype; // retain appropriate elements

        });    

        var selectedWeather = $('#weather').val().toString().toLowerCase(); //gender
        var selectedDistance= $('#distance').val().toString().toLowerCase(); //amount
        var selectedEventType = $('#eventtype').val().toString().toLowerCase(); //age

        var distance = "";

        $.each(events,function(k, v){

            if( events[k].weather.toString().toLowerCase() == selectedWeather &&
                events[k].distance.toString().toLowerCase() == selectedDistance &&
                events[k].eventtype.toString().toLowerCase() == selectedEventType){

                distance = events[k][selectedDistance];
            }
        }); 

            //Empty the div
            $('#eventResult').empty();
            //Show the result in div
            var displayText = "Event Type: " + selectedEventType + ", Weather: " + selectedWeather + ", Distance: " + distance + ", Price: element.price-from-json";
            $("#eventResult").append(distance == "" ? "No Results" : displayText);
            return false; //Stop page from reloading
        });
    });

Answer 1

Fiddle 这里：

http://jsfiddle.net/brettwgreen/hfuukpzx/

主要问题是您对 div 的清除在循环内，正如 Karl-André Gagnon 所建议的那样。

    $(document).ready(function() {    

    var obj = {
        "events": [

        {
        "location": "Sheffield",
        "date": "May 13th, 2015",
        "map": "img/leeds_town_hall.jpg",
        "weather": "rain",
        "distance": "0-5 miles",
        "eventtype": "music"
        },

        {
        "location": "Leeds",
        "date": "May 13th, 2015",
        "map": "img/leeds_town_hall.jpg",
        "weather":"sun",
        "distance":"6-10 miles",
        "eventtype":"historical"
        },

        {
        "location": "York",
        "date": "May 13th, 2015",
        "map": "img/leeds_town_hall.jpg",
        "weather":"snow",
        "distance":"11-20 miles",
        "eventtype":"food"
        },

        {
        "location": "Leeds Town Hall",
        "date": "May 13th, 2015",
        "map": "img/leeds_town_hall.jpg",
        "weather":"rain",
        "distance":"21-25 miles",
        "eventtype":"arts"
        },

        {
        "location": "Leeds Town Hall",
        "date": "May 13th, 2015",
        "map": "img/leeds_town_hall.jpg",
        "weather":"sun",
        "distance":"0-5 miles",
        "eventtype":"music"
        },

        {
        "location": "Leeds Town Hall",
        "date": "May 13th, 2015",
        "map": "img/leeds_town_hall.jpg",
        "weather":"snow",
        "distance":"0-5 miles",
        "eventtype":"family"
        }

    ]};


    //Find the value when form is submitted
    $('#calc').click(function(e) {
        e.preventDefault();

        var events = jQuery.grep(obj.events, function(element, index){
        return element.weather && element.distance && element.eventtype; // retain appropriate elements

        });    
        console.log(events);
        var selectedWeather = $('#weather').val().toString().toLowerCase(); //gender
        var selectedDistance= $('#distance').val().toString().toLowerCase(); //amount
        var selectedEventType = $('#eventtype').val().toString().toLowerCase(); //age

        var distance = "";

        //Empty the div -- Moved this up
        $('#eventResult').empty();

        $.each(events,function(k, v){
            console.log(events[k].weather.toString().toLowerCase());
            console.log(events[k].distance.toString().toLowerCase());
            console.log(events[k].eventtype.toString().toLowerCase());
            if( events[k].weather.toString().toLowerCase() == selectedWeather &&
                events[k].distance.toString().toLowerCase() == selectedDistance &&
                events[k].eventtype.toString().toLowerCase() == selectedEventType){

                distance = events[k][selectedDistance];

            }



        //Show the result in div
        var displayText = "Event Type: " + selectedEventType + ", Weather: " + selectedWeather + ", Distance: " + selectedDistance + ", Price: element.price-from-json";

        $("#eventResult").append(distance == "" ? "No Results" : displayText);

        });
    });
return false; //Stop page from reloading
});

Answer 2

改变

distance = events[k][selectedDistance];

至：

distance = "Event Type: " + selectedEventType + ", Weather: " + selectedWeather + ", Distance: " + distance + ", Price: element.price-from-json";

然后使用：

$("#eventResult").append(distance == "" ? "No Results" : distance);

使用 jQuery 过滤 JSON

Filtering JSON using jQuery

javascript

arrays

jquery

json

filtering