Javascript 使用jQuery过滤JSON
我目前正在开发一个web应用程序，并希望加入一个过滤器功能，为用户使用多个选项，然后该过滤器显示符合条件的JSON数组中的数据。我已经找到了一个公平的方法，但似乎无法使筛选正常工作，我认为问题可能出在jQuery.each（）方法上 我真的很感谢你的帮助！这是我目前拥有的 提前谢谢 HTML文件Javascript 使用jQuery过滤JSON,javascript,jquery,arrays,json,filtering,Javascript,Jquery,Arrays,Json,Filtering,我目前正在开发一个web应用程序，并希望加入一个过滤器功能，为用户使用多个选项，然后该过滤器显示符合条件的JSON数组中的数据。我已经找到了一个公平的方法，但似乎无法使筛选正常工作，我认为问题可能出在jQuery.each（）方法上 我真的很感谢你的帮助！这是我目前拥有的 提前谢谢 HTML文件 <html> <head> <title>Test Filter</title> <script src="http://code
<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>
$(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
});
$("#eventResult").append(distance == "" ? "No Results" : distance);
什么是
distance=events[k][selectedDistance]应该怎么做？为什么要使用selectedDistance
作为属性名称？应该是distance=events[k]。位置？
comme“Empty The div”后的代码应该在循环之外。现在您只显示与筛选器匹配的最后一个事件。我已尝试distance=events[k][selectedDistance]
将数组中的值放入可变距离。events[k][selectedDistance]
仍然不会返回任何有用的内容。必须键入确切的事件类型。。。例如“音乐”。没有逻辑认为没有过滤器意味着“不过滤”谢谢你的回复，我尝试了小提琴，对我来说，当我更改参数时，它没有找到所有事件，只是第一个。更新。。。返回false实际上在$each中，需要删除。更新以上和小提琴。
distance = events[k][selectedDistance];
distance = "Event Type: " + selectedEventType + ", Weather: " + selectedWeather + ", Distance: " + distance + ", Price: element.price-from-json";
$("#eventResult").append(distance == "" ? "No Results" : distance);