Вопрос состоит в том как правильно организовать фильтр на стороне клиента

var products = [{ 
    name: "HP", 
    price: 8000 
  }, 
  { 
    name: "Asus", 
    price: 8000 
  }, 
  { 
    name: "MSI", 
    price: 20000 
  }, 
  { 
    name: "Asus", 
    price: 15000 
  }, 
  { 
    name: "Asus", 
    price: 9000 
  }, 
  { 
    name: "HP", 
    price: 17000 
  }, 
] 
//---------------------------------------------------------------- 
var unq = [] // Только наименование 
// Оставляет массив продуктов 
unq = products.map(item => item.name) 
  .filter((value, index, self) => self.indexOf(value) === index) 
 
var sel = $('select') 
var cat = $('.catalog') 
// Селект из уникальных продуктов 
$.each(unq, function(i, p) { 
  sel.append('<option value="' + p + '">' + p + '</option>') 
}) 
// Построение каталога из всех продуктов 
$.each(products, function(i, p) { 
  // Создание нового элемента для продукта 
  let div = $('<div/>') 
    .attr({ 
      class: 'item', 
      "data-prod-name": p.name, 
      "data-price": p.price 
    }) 
    .text(p.name + ' цена ' + p.price); 
  cat.append(div); 
}) 
 
// Если есть изменения в селекте 
sel.on('change', function(e) { 
  var filter = $(this).val() 
  //---------------------------------------------------------------- 
  cat.children().each(function(i) { 
    if (filter !== "All" && filter !== $(this).attr('data-prod-name')) { 
      $(this).hide() 
    } else { 
      $(this).show() 
    } 
 
  }) 
}) 
 
//---------------------------------------------------------------- 
// Филтр по цене 
$('.price').keypress(function(e) { 
  if (e.which == 13) { 
    var val = $(this).val() 
    cat.children().each(function(i) { 
      //-------------------------------------------- 
      // Mathjs вроде они лучше, чем обычный eval.. 
      //-------------------------------------------- 
      if (!math.eval($(this).attr('data-price') + val)) { 
        $(this).hide() 
      } else if (val.length === 0) { 
        // Фильтрует только в случае Only if nothing was filtered 
        // когда была предыдущая фильтрация 
        // Выбор из селекта 
        sel.trigger('change') 
      } else { 
        $(this).show() 
      } 
    }) 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.1/math.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="" id=""> 
  <option value="All">All</option> 
</select> 
 
<input type="text" class="price" name="byprice" placeholder="filter by price" title="Filter by: &gt; | &gt;&equals; | &lt; | &lt;&equals; | &equals;&equals; | &equals;&equals;8000 [Enter]"> 
<span>Filter by: &gt; | &gt;&equals; | &lt; | &lt;&equals; | &equals;&equals; | &equals;&equals;8000 [Enter]</span> 
<hr> 
<h1>Каталог</h1> 
<div class="catalog"> 
 
</div> 
<hr>