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

Question

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

例如，我有一个可以显示在下拉列表中的食物列表。有些用户有权查看水果，有些用户有权查看蔬菜，有些则两者都有。列表returns所有食物。

根据他们的权限，我想使用 Underscore 的 .filter/.reject 或 pure 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。如果点击“#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 + ']'
        };
    }
});

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

Underscore + _.filter filtering a list based on radio buttons

javascript

jquery

underscore.js