Q:

How To Filter JSON File By Button Data Attributes

I have a series of buttons including data-map attributes like below:
<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>

and some events stored in a JSON file called events.json like:
{"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"
        }
] }

now how I can filter the JSON file to only in to the selected data-map attribute?
$("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);
 //...
});
});

A:

To do this you would need to loop over every item in the events array looking for a matching date value:
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
Note that I changed the property accessor to use bracket notation as 8-9 would be interpreted as an integer, and not a property name.

