2015-11-12 3 views
1

У меня есть ряд кнопок, в том числе data-map атрибутов, как показано ниже:Как Фильтр JSON файла с помощью кнопки Data Attributes

<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> 

и некоторых событий, хранящихся в файле JSON называется events.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

Если я прав, вы хотите выбрать дату из событий, которые соответствуют дате в кнопке? Это динамично меняется? – guradio

ответ

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 
     } 
    }; 
}); 

Example fiddle

Обратите внимание, что я изменил свойство аксессора использовать обозначение скобки как 8-9 будет интерпретироваться как целое число, а не имя свойства.

+0

Спасибо, Рори МакКросан сейчас работает – Behseini

+0

Нет проблем, рад помочь. –

Смежные вопросы