[英]Filtering JSON using jQuery
我当前正在使用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
});
});
在这里摆弄:
http://jsfiddle.net/brettwgreen/hfuukpzx/
主要问题是,如Karl-AndréGagnon所建议,您对div的清除位于循环内。
$(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
});
更改
distance = events[k][selectedDistance];
至:
distance = "Event Type: " + selectedEventType + ", Weather: " + selectedWeather + ", Distance: " + distance + ", Price: element.price-from-json";
然后使用:
$("#eventResult").append(distance == "" ? "No Results" : distance);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.