«фильтровать» json через ajax (jquery)

Question

Я пытаюсь отфильтровать массив json через ajax и не знаю, как это сделать.

{ posts: [{"image":"images/bbtv.jpg", "group":"a"}, {"image":"images/grow.jpg", "group":"b"}, {"image":"images/tabs.jpg", "group":"a"}, {"image":"images/bia.jpg", "group":"b"}]}

Я хочу, чтобы я мог показывать только элементы в группе A или группе B.

как мне изменить мой ajax для фильтрации содержимого?

$.ajax({
 type: "GET",
 url: "category/all.js",
 dataType: "json",
 cache: false,
 contentType: "application/json",
 success: function(data) {
$('#folio').html("<ul/>");
$.each(data.posts, function(i,post){
   $('#folio ul').append('<li><div class="boxgrid captionfull"><img src="' + post.image + '" /></div></li>');
});

initBinding();
 },
 error: function(xhr, status, error) {
   alert(xhr.status);
 }

});

Кроме того, как я могу заставить каждую ссылку обрабатывать фильтр?

<a href="category/all.js">Group A</a> <a href="category/all.js">Group B</a>

Извините за все эти вопросы, не могу найти решение ... Любая помощь в правильном направлении будет признательна.

Спасибо!

Answer 1

Вам нужно написать функцию фильтра, более чем вероятно:

function filterGroup(obj, filteredGroup) {
  var resultObj = $.extend({},obj);

  for (var i in obj) {
    if ( obj.hasOwnProperty(i) ) {
      if ( obj[i].group && obj[i].group !== filteredGroup ) {
        delete resultObj[i];
      }
    }
  }
  return resultObj;
}

Тогда вы просто пропустите свои данные через этот фильтр. Вы также, вероятно, захотите переключиться на POST с таким набором JSON.

$.ajax({
  type: "POST",
  url: "category/all.js",
  dataType: "json",
  cache: false,
  data: {"posts": filterGroup(posts, 'a')},
  contentType: "application/json",
  success: function(data) {
    $('#folio').html("<ul/>");
    $.each(data.posts, function(i,post){
      $('#folio ul').append('<li><div class="boxgrid captionfull"><img src="' + 
                           post.image + '" /></div></li>');
    });
  }
});

Большая часть этого кода является гипотетической, поскольку я точно не знаю, что вы делаете, но он должен вас приблизить Только не ожидайте, что сможете скопировать / вставить его. Это предполагает, что вы фактически назвали свою переменную данных, например, posts.

Чтобы создать ссылку для запуска кода, вам нужно прикрепить обработчик кликов и идентифицировать каждую ссылку. Я предполагаю, что вы добавили имя класса для каждого (filterA и filterB):

$('.filterA').click(function(){
  filterGroup(someDataObject, 'a');
  return false;
});
$('.filterB').click(function(){
  filterGroup(someDataObject, 'b');
  return false;
});