Фильтрация элементов в списке на основе их свойств в javascript

Question

Я пишу простой бит javascript, чтобы скрыть/показать элементы в списке в зависимости от проверки или снятия флажков.

Например, у меня может быть 3 флажка, представляющие цвета красный, синий, зеленый. И список продуктов, доступных в 1 или более из этих цветов. Поэтому, если отмечены красные и зеленые флажки, то продукты, которые недоступны ни красным, ни зеленым, должны быть скрыты.

Я очень рад, что могу это сделать, но не являюсь разработчиком javascript. Я не уверен, что то, что я делаю, очень изящно (на самом деле я уверен, что это неэлегантно). У меня есть исходные данные в электронной таблице, поэтому вы можете легко получить CSV-файл данных для каждого продукта. «bike, x ,, x» может означать, что велосипеды доступны в красном и зеленом, но не синем.

Так может в конечном итоге с чем-то вроде следующего:

products = [ 
    { 
     id: "bike", 
     colours: ["x","","x"] 
    }, 
    { 
     id: "apple", 
     colours: ["x","x",""] 
    }, 
    { 
     id: "cheese", 
     colours: ["","","x"] 
    } 
]; 



function selectProducts(filter){ 
    var i; 
    for(i=0; i<products.length; i++){ 
     var fi; 
     for(fi=0; fi<filter.length; fi++){ 
      if(filter[fi]=='x' && products[i].colours[fi]=='x'){ 
      console.log(products[i].id+" will be visible "); 
      break; 
      } 
     } 
    } 
} 

Фильтр прошел в selectProducts будет массив как [ «х», «х», «»], который может представлять красный или зеленый но не синий - точно так же, как и цветовые свойства продуктов. Мой инстинкт первоначально состоял в том, чтобы использовать двоичное представление доступных цветов (например, 101 для байка в приведенном выше примере) и использовать побитовое и на фильтре, думая, что это будет проще и эффективнее, но поскольку javascript хранит числа как с плавающей запятой, так и Я не вижу простого способа работать с двоичными представлениями чисел, чувствуя, что это будет идти против зерна.

Может быть что-то вроде следующего было бы лучше, но это кажется немного многословный, и будет немного больше усложнит для преобразования из файла CSV ...

colours: { 
    red: "y", 
    green: "n", 
    blue: "y" 
} 

Любые мысли?

Я делаю эту клиентскую сторону, потому что изначально я не мог полагаться на наличие каких-либо доступных PHP-серверов, хотя с тех пор я нашел, что могу использовать PHP. Я все равно хотел бы сделать это на стороне клиента только для реагирования, который, я думаю, будет лучше, пока список не станет слишком длинным. Я, вероятно, попробую оба и посмотрю, как они сравниваются ...

Answer 1

Несколько лет спустя ... Вот как бы я это сделал: JSFiddle Это не обязательно будет более правильным, чем ваш способ сделать он, просто другой, и я думал, что поделюсь им с вами. Изменение "x" и "" с булевыми значениями true и false, соответственно, также является хорошей идеей, если вы должны пойти с вашим методом.