如何通过按钮数据属性过滤JSON文件
如何通过按钮数据属性过滤JSON文件
提问于 2015-11-12 10:15:06
我有一系列按钮，包括如下所示的data-map属性：
<button class="btn btn-default mapper" data-map="2015-11-13">Monday</button>
<button class="btn btn-default mapper" data-map="2015-11-14">Tuesday</button>
<button class="btn btn-default mapper" data-map="2015-11-15">Wednesday</button>存储在名为events.json的JSON文件中的一些事件如下：
{"events": [
{
"date":"2015-11-13",
"8-9":"Soccer",
"9-10":"Painting",
"10-11":"Yoga",
"11-12":"Painting",
"12-1":"Fun",
"1-2":"Booking",
"2-3":"Movie",
"4-5":"Basketball",
"4-5":"Reading"
},
{
"date":"2015-11-14",
"8-9":"Soccer",
"9-10":"Painting",
"10-11":"Internet",
"11-12":"Painting",
"12-1":"Fun",
"1-2":"Booking",
"2-3":"Movie",
"4-5":"Basketball",
"4-5":"Reading"
},
{
"date":"2015-11-15",
"8-9":"Dancing",
"9-10":"Painting",
"10-11":"Swimming",
"11-12":"Painting",
"12-1":"Fun",
"1-2":"Booking",
"2-3":"Movie",
"4-5":"Basketball",
"4-5":"Reading"
}
] }现在，我如何将JSON文件过滤到所选的data-map属性中？
$("button").on("click", function(){
var data = $(this).data("map");
var request = $.ajax({
type: "POST",
url: "events.json",
cache: false,
dataType: "JSON"
});
request.done(function( data ) {
$("#8-9").html(data.8-9);
//...
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-12 10:18:41
要做到这一点，您需要遍历events数组中的每个项，寻找匹配的date值：
request.done(function(data) {
for (var i = 0; i < data.events.length; i++) {
var item = data.events[i];
if (item.date == date) { // date = the value retrieved from the data attribute on the button
$("#8-9").html(item['8-9']);
break; // end the loop - assuming there will only be 1 matching item
}
};
});Example fiddle
注意，我将属性访问器更改为使用括号符号，因为8-9将被解释为整数，而不是属性名称。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33669019
复制相关文章
相似问题
腾讯云开发者
