我有一系列按钮,包括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);
//...
});
});
答案 0 :(得分:2)
要执行此操作,您需要遍历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
}
};
});
请注意,我更改了属性访问器以使用括号表示法,因为8-9
将被解释为整数,而不是属性名称。