Подчеркивание + _.фильтр, фильтрующий список на основе радиокнопки

Question

Я хотел бы отфильтровать варианты продуктов на основе выбора переключателей.

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

В зависимости от их прав, я хотел бы отфильтровать список на основе f.food_type, используя .filter/ .reject или чистый JavaScript.

$.get('/api/foods', function(foods) { 
    return $foodList.select2({ 
     placeholder: 'Select food', 
     data: foods.map(function(f) { 
     return { 
      id: f.id, 
      text: f.food_name + ' [' + f.food_type + ']' 
     }; 
     }) 
    }); 
    }); 

Раскрывается для того, кто имеет разрешение на просмотр фруктов и овощей. Я хотел бы скрыть тот или иной, основываясь на их разрешениях.

Я использую библиотеку Underscore, но не знаю, как сделать это с _.filter. Возможно, есть еще более простой способ отфильтровать список на основе радиокнопки? То есть. если нажать «#vegetables», только показать список овощей?

Answer 1

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

Вы должны быть в состоянии адаптировать их для своей цели. Разумеется, вы можете использовать результат одного в качестве основы для следующего.

var foods = [ 
 
    {food_name: 'banana', food_type: 'good'}, 
 
    {food_name: 'burger', food_type: 'crap'}, 
 
    {food_name: 'fries', food_type: 'crap'}, 
 
    {food_name: 'butter', food_type: 'ok'}, 
 
    {food_name: 'apple', food_type: 'good'} 
 
] 
 

 
//ensure you have access to user permissions 
 
var userFoodTypes = ['good', 'ok']; 
 

 
var filteredToPermissions = _.filter(foods, function(f) { 
 
    return _.contains(userFoodTypes, f.food_type); 
 
}); 
 

 
alert(filteredToPermissions.length); 
 
alert(filteredToPermissions[0].food_type); 
 

 
var filteredToSelected = _.where(foods, {food_type: 'ok'}); 
 

 
alert(filteredToSelected[0].food_type);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Answer 2

Если предположить, что радиостанции name="food_type" и значения идентичны типам питания в ваших данных вы можете добавить простое условие map

var selectedFoodType = $('input[name=food_type]:checked').val(); 

// ajax left out for clarity 

foods.map(function (f) { 
    if (selectedFoodType === f.foodType) { 
     return { 
      id: f.id, 
      text: f.food_name + ' [' + f.food_type + ']' 
     }; 
    } 
}); 

Что касается фильтрации по пользователю только роли, необходима некоторая хэш-карта, а также доступ к переменной, которая хранит текущий тип пользователя.

var roles ={ 
    buyer : ['vegetabes'], 
    seller : ['fruits'], 
    admin : ['vegetabes','fruits'] 
} 

var userType = someStoredUserObject.userType; 
var allowedFoodTypes = roles[userType ]; 

foods.map(function (f) { 
    if (allowedFoodTypes.indexOf(f.food_type) >-1) { 
     return { 
      id: f.id, 
      text: f.food_name + ' [' + f.food_type + ']' 
     }; 
    } 
});