如何通过按钮数据属性过滤JSON文件

How To Filter JSON File By Button Data Attributes

本文关键字：JSON 文件 过滤 数据属性 何通过 按钮      更新时间：2023-09-26

我有一系列按钮，包括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);
 //...
});
});

要做到这一点，您需要在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将被解释为整数，而不是属性名称。

相关文章：