Фильтр выдающий результаты из массива

297

16 мая 2018, 11:20

Хочу сделать что-то вроде фильтра, однако не с сортировкой блоков, а именно вставкой данных из массива. То есть, изначально блок .result пустой. Скрипт видит активную ссылку и размещает данные сравнивая CatID из массива и data-cat из ссылки. При клике на ссылку, данные плавно исчезают и запрашиваются новые. Накидал минимальный код:

var result=[ 
//['CatID','Name','Price','URL'] 
['1','Данные 1','123','http://sitetest.com/page1.html'], 
['2','Данные 2','533','http://sitetest.com/page2.html'] 
['1','Данные 3','123','http://sitetest.com/page3.html'], 
['1','Данные 4','533','http://sitetest.com/page4.html'] 
['1','Данные 5','123','http://sitetest.com/page5.html'], 
['2','Данные 6','533','http://sitetest.com/page6.html'] 
];

<div class="filter"> 
<a href="javascript:void(0)" class="active" data-cat="1">Вариант 1</a> 
<a href="javascript:void(0)" class="" data-cat="2">Вариант 2</a> 
</div> 
 
<div class="result"></div>

На выходе код элементов внутри .result может быть любым. Например:

<a href="http://sitetest.com/page1.html">Данные 1 за $123</a>

Целиком писать все не обязательно, только чтоб понять сам принцип. Или хотя бы киньте ссылки на нужные функции для реализации. Заранее спасибо.

Answer 1

Всё просто:
Ищем .active и выполняем функцию сортировки.
Клик по другой категории делает так же, только с другим ID.

Сама сортировка проще - фильтруем по ID, преобразуем данные в нужный шаблон и выводим его.

Я чуть упоролся, но, думаю, понятно:

var result = [ 
  //['CatID','Name','Price','URL'] 
  ['1', 'Данные 1', '123', 'http://sitetest.com/page1.html'], 
  ['2', 'Данные 2', '533', 'http://sitetest.com/page2.html'], 
  ['1', 'Данные 3', '123', 'http://sitetest.com/page3.html'], 
  ['1', 'Данные 4', '533', 'http://sitetest.com/page4.html'], 
  ['1', 'Данные 5', '123', 'http://sitetest.com/page5.html'], 
  ['2', 'Данные 6', '533', 'http://sitetest.com/page6.html'] 
]; 
 
document.querySelector('.filter').addEventListener('click', e => e.target.nodeName === 'A' ? (el = e.target, cat = el.dataset.cat, document.querySelector('.result').innerHTML = result.filter(i => cat === i[0]).map(e => `<a href="{3}">{1} за \${2}</a>`.replace(/{(\d)}/g, (_, id) => id in e ? e[id] : `{${id}}`)).join('<br />')) : null); 
 
document.querySelector('.active').click();

<div class="filter"> 
<a href="javascript:void(0)" class="active" data-cat="1">Вариант 1</a> 
<a href="javascript:void(0)" class="" data-cat="2">Вариант 2</a> 
</div> 
 
<div class="result"></div>

UPD:
Писать как выше - грех, за который надо бы хворостиной отходить создавшего.
Я просто не удержался :)

Вот пример на jQuery (просто замена стандартных функций на библиотечные; жуть, но раз народ просит...) с пояснениями:

var result = [ 
  //['CatID','Name','Price','URL'] 
  ['1', 'Данные 1', '123', 'http://sitetest.com/page1.html'], 
  ['2', 'Данные 2', '533', 'http://sitetest.com/page2.html'], 
  ['1', 'Данные 3', '123', 'http://sitetest.com/page3.html'], 
  ['1', 'Данные 4', '533', 'http://sitetest.com/page4.html'], 
  ['1', 'Данные 5', '123', 'http://sitetest.com/page5.html'], 
  ['2', 'Данные 6', '533', 'http://sitetest.com/page6.html'] 
]; 
 
$('.filter').on('click', 'a', function () { 
  let cat = $(this).data('cat'); // Выбираем искомую категорию (int) 
  let html = result 
               .filter(i => cat === i[0]) // Оставляем только те массивы, у которых первый элемент равен искомой категории 
               .map(e => `<a href="{3}">{1} за \${2}</a>`.replace(/{(\d)}/g, (_, id) => id in e ? e[id] : `{${id}}`))  // Преобразуем каждый объект в строку, где заменим каждый willcard в шаблоне на реальное значение ({0} - первый элемент, {1} - второй элемент и т. д.) 
               .join('<br />'); // Склеиваем в строку через тэг переноса 
   
   
  $('.result').html(html); // Заменяем прошлый .result новыми данными 
 
$('.active').click(); // После того, как навесили обработчик, эмулируем клик по активной ссылке, чтобы сразу загрузить активную категорию

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="filter"> 
<a href="javascript:void(0)" class="active" data-cat="1">Вариант 1</a> 
<a href="javascript:void(0)" class="" data-cat="2">Вариант 2</a> 
</div> 
 
<div class="result"></div>

Answer 2

Вариант на jQuery со сменой .active

var result=[ 
//['CatID','Name','Price','URL'] 
['1','Данные 1','123','http://sitetest.com/page1.html'], 
['2','Данные 2','533','http://sitetest.com/page2.html'], 
['1','Данные 3','123','http://sitetest.com/page3.html'], 
['1','Данные 4','533','http://sitetest.com/page4.html'], 
['1','Данные 5','123','http://sitetest.com/page5.html'], 
['2','Данные 6','533','http://sitetest.com/page6.html'] 
], 
output=$('.result'); 
 
$('.filter').on('click','a',function() { 
  btn=$(this); 
  $('.filter a').removeClass('active'); 
  btn.addClass('active'); 
  output.empty(); 
  for (i = 0; i < result.length; i++) { 
      if (result[i][0]===btn.attr('data-cat')) { 
        output.append('<div><a href="'+result[i][3]+'">'+result[i][1]+' за $'+result[i][2]+'</a></div>'); 
      } 
  } 
}) 
 
$('.active').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="filter"> 
<a href="javascript:void(0)" class="active" data-cat="1">Вариант 1</a> 
<a href="javascript:void(0)" data-cat="2">Вариант 2</a> 
</div> 
 
<div class="result"></div>

Первый вариант без jQuery и без класса active

var result=[ 
//['CatID','Name','Price','URL'] 
['1','Данные 1','123','http://sitetest.com/page1.html'], 
['2','Данные 2','533','http://sitetest.com/page2.html'], 
['1','Данные 3','123','http://sitetest.com/page3.html'], 
['1','Данные 4','533','http://sitetest.com/page4.html'], 
['1','Данные 5','123','http://sitetest.com/page5.html'], 
['2','Данные 6','533','http://sitetest.com/page6.html'] 
]; 
 
var filters = document.getElementsByClassName("filters"); 
var output = document.getElementsByClassName('result'); 
 
function filterIt() { 
    var catId = this.getAttribute("data-cat"); 
    output[0].innerHTML=''; 
    for (i = 0; i < result.length; i++) { 
        if (result[i][0]===catId) { 
          var d = document.createElement("div"); 
          d.innerHTML='<a href="'+result[i][3]+'">'+result[i][1]+' за $'+result[i][2]+'</a>'; 
          output[0].appendChild(d); 
        } 
    } 
}; 
 
for (var i = 0; i < filters.length; i++) { 
    filters[i].addEventListener('click', filterIt, false); 
}

<div class="filter"> 
<a href="javascript:void(0)" class="filters active" data-cat="1">Вариант 1</a> 
<a href="javascript:void(0)" class="filters" data-cat="2">Вариант 2</a> 
</div> 
 
<div class="result"></div>