Question

我有以下用户名数组

Usernames = [
  {
    "id": 1,
    "userName": "Jack",
    "description": "jack is a nice guy",
    "userRoleIds": [
      1
    ]
  },
  {
    "id": 2,
    "userName": "Caroline",
    "description": "Good girl",
    "userRoleIds": [
      2,3
    ]
  },
  {
    "id": 3,
    "userName": "Smith",
    "description": "Smithyyyy",
    "userRoleIds": [
      1,2
    ]
  }
]

还有一组userRoles。

userRoles = [
  {
    id: 1,
    roleName: "Admin"
  },
  {
    id: 2,
    roleName: "Tester"
  },
  {
    id: 3,
    roleName: "Developer"
  }
]

我想要完成的是首先在Usernames和userRoles中连接数组以获得以下结果。

 Usernames = [
      {
        "id": 1,
        "userName": "Jack",
        "description": "jack is a nice guy",
        "userRoleIds": [
          {
            "id": 1,
            "roleName" : "Admin"
          }
        ]
      },
     {
    "id": 2,
    "userName": "Caroline",
    "description": "Good girl",
    "userRoleIds": [
         {
            "id": 2,
            "roleName" : "Tester"
          },
          {
            "id": 3,
            "roleName" : "Developer"
          }
    ]
   },...

我想要的第二件事是能够过滤由管道标志分隔的roleName和userName。例如，在文本框中键入某些内容，例如搜索userName和roleName。

如果我输入

Caroline, Tester

结果将是

result = [
  {
    "id": 2,
    "userName": "Caroline",
    "description": "Good girl",
    "userRoleIds": [
      2,3
    ]
  },
  {
    "id": 3,
    "userName": "Smith",
    "description": "Smithyyyy",
    "userRoleIds": [
      1,2
    ]
  }
]

实现这一目标的最佳做法是什么？

由于

Answer 1

我将如何做到这一点。我更喜欢使用服务并利用它们的功能来保持代码清洁。

app.service('UserService', function (PermisionsServices) {
    var self = {
        'list': [],
        'load': function (Users) {//Pass your array of Users
            angular.forEach(Users, function (user) {
                angular.forEach(user.userRoleIds, function (role) {
                    self.user.userRolesIds.push(PermisionsServices.get(role));
                });
                self.list.push(user);
            });
        }, 'get': function (id) {
            for (var i = 0; i < self.list.length; i++) {
                var obj = self.list[i];
                if (obj.id == id) {
                    return obj;
                }
            }
        }
    };
    return self;
});

app.service('PermisionsServices', function () {
    var self = {
        'list': [],
        'load': function (permisions) {//Pass your array of permisions
            angular.forEach(permisions, function (permision) {
                self.list.push(permision);
            });
        }, 'get': function (id) {
            for (var i = 0; i < self.list.length; i++) {
                var obj = self.list[i];
                if (obj.id == id) {
                    return obj;
                }
            }
        }
    };
    return self;
});

之后，您可以在控制器上使用它： $ scope.users = UserService;

并将每个用户作为可以具有多个对象权限的单独对象进行访问。

注意：构建服务（填充它）当然取决于您的应用程序逻辑和控制器，您可以轻松地删除＆＃34;加载＆＃34;函数，只需通过复制和粘贴数组硬编码列表对象。

这是我用来通过资源从API加载数据的方法。

此致

编辑：要在UI上使用，您只需调用：

<div ng-repeat='user in users.list'>
  {{user.name}} has {{user.permissions}}
</div>

因为对象信息已包含在其中。

编辑2：如果您想搜索数据，那么您只需添加如下过滤器：

<div ng-repeat='user in users.list | filter: filterList'>
      {{user.name}} has {{user.permissions}}
</div>

然后在控制器上：

$scope.filterList = function (user) {
        if ($scope.filterTextBox) {
            return user.name.indexOf($scope.filterTextBox) == 0;
        }

        return true;
    }

希望这适合你

Answer 2

我会像这样使用纯JS。每个分配线不会超过一个。

var Usernames = [
  {
    "id": 1,
    "userName": "Jack",
    "description": "jack is a nice guy",
    "userRoleIds": [
      1
    ]
  },
  {
    "id": 2,
    "userName": "Caroline",
    "description": "Good girl",
    "userRoleIds": [
      2,3
    ]
  },
  {
    "id": 3,
    "userName": "Smith",
    "description": "Smithyyyy",
    "userRoleIds": [
      1,2
    ]
  }
],
userRoles = [
  {
    id: 1,
    roleName: "Admin"
  },
  {
    id: 2,
    roleName: "Tester"
  },
  {
    id: 3,
    roleName: "Developer"
  }
],
modified = Usernames.reduce((p,c) => (c.userRoleIds = c.userRoleIds.map(e => e = userRoles.find(f => f.id == e)),p.concat(c)),[]),
   query = ["Caroline","Tester"],
filtered = modified.filter(f => query.includes(f.userName) || f.userRoleIds.some(e => query.includes(e.roleName)));
console.log(JSON.stringify(modified,null,2));
console.log(JSON.stringify(filtered,null,2));

Answer 3

您可以使用lodash来实现此目标。

var role = _.find(userRoles, function(role) { 
            return role.roleName == 'Tester'; 
        });
_.find(Usernames, function(user) { 
    return user.userName == 'Caroline' || _.indexOf(user.userRoleIds, role.id)>=0; 
});

AngularJS数组比较

3 个答案: