Underscore + _.filter根据单选按钮过滤列表

Question

我想根据单选按钮选择过滤食物选项。

作为一个例子，我有一个可以显示在下拉列表中的食物清单。一些用户有权查看水果，其他蔬菜和一些蔬菜。该清单返回所有食物。

根据他们的权限，我想使用Underscore的 .filter / .reject或纯JavaScript来基于f.food_type过滤掉列表。

  $.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执行此操作。是否有更简单的方法可以根据单选按钮过滤列表？ IE浏览器。如果点击＆＃39;＃vegetables＆＃39;，只显示蔬菜清单？

Answer 1

这是一个示例，显示了基于其他值进行过滤的几种方法。我需要假设您已经在某处加载了用户权限。并在其他地方获取所选食物类型的值。

您应该能够根据您的目的调整这些。当然，你可以使用one的结果作为下一个的结果。

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 + ']'
        };
    }
});