Javascript AngularJS数组比较

我得到了以下用户名数组

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"
  }
]

我想做的是首先在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

。例如，在搜索用户名和角色名的文本框中键入内容

如果我打字

Caroline，检测仪

结果将是

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

实现这一目标的最佳实践是什么

---

谢谢

以下是我的做法。我更喜欢使用服务并利用它们的功能来保持代码整洁

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;
});

---

希望这对你有用

以下是我的做法。我更喜欢使用服务并利用它们的功能来保持代码整洁

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;
});

希望这对您有用

您可以用它来实现这一点

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

您可以使用来实现这一点

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

---

我会像这样使用纯JS。每个作业行最多只需要一行作业

var用户名=[
{
“id”：1，
“用户名”：“杰克”，
“描述”：“杰克是个好人”，
“userRoleIds”：[
1.
]
},
{
“id”：2，
“用户名”：“卡罗琳”，
“描述”：“好女孩”，
“userRoleIds”：[
2,3
]
},
{
“id”：3，
“用户名”：“史密斯”，
“说明”：“Smithyyyy”，
“userRoleIds”：[
1,2
]
}
],
用户角色=[
{
id:1，
roleName：“管理员”
},
{
id:2，
roleName：“测试者”
},
{
id:3，
roleName：“开发者”
}
],
modified=Usernames.reduce（（p，c）=>（c.userRoleIds=c.userRoleIds.map（e=>e=userRoles.find（f=>f.id==e）），p.concat（c）），[]），
查询=[“Caroline”，“Tester”]，
filtered=modified.filter（f=>query.includes（f.userName）| | f.userRoleIds.some（e=>query.includes（e.roleName））；
log（JSON.stringify（modified，null，2））；
log（JSON.stringify（filtered，null，2））我会像这样使用纯JS。每个作业行最多只需要一行作业


var用户名=[
{
“id”：1，
“用户名”：“杰克”，
“描述”：“杰克是个好人”，
“userRoleIds”：[
1.
]
},
{
“id”：2，
“用户名”：“卡罗琳”，
“描述”：“好女孩”，
“userRoleIds”：[
2,3
]
},
{
“id”：3，
“用户名”：“史密斯”，
“说明”：“Smithyyyy”，
“userRoleIds”：[
1,2
]
}
],
用户角色=[
{
id:1，
roleName：“管理员”
},
{
id:2，
roleName：“测试者”
},
{
id:3，
roleName：“开发者”
}
],
modified=Usernames.reduce（（p，c）=>（c.userRoleIds=c.userRoleIds.map（e=>e=userRoles.find（f=>f.id==e）），p.concat（c）），[]），
查询=[“Caroline”，“Tester”]，
filtered=modified.filter（f=>query.includes（f.userName）| | f.userRoleIds.some（e=>query.includes（e.roleName））；
log（JSON.stringify（modified，null，2））；
log（JSON.stringify（filtered，null，2））Hi Pablo它将全部在控制器中，我将在UI中显示结果。欢呼、困惑和疑问应该在评论中提出@pabloLooks pretty clean将创建一个plunkr并在完成后共享它，这将需要我一段时间，尽管我对js不是很好：）没问题。完成后共享Plunkr，我可以帮助您快速完成。但是，如果我想在UI中搜索用户名、用户角色，并像问题的最后一个示例那样显示适当的结果，该怎么办？必须在控制器中添加一个过滤器吗？嗨，Pablo，它将全部在控制器中，我将在UI中显示结果。欢呼、困惑和疑问应该在评论中提出@pabloLooks pretty clean将创建一个plunkr并在完成后共享它，这将需要我一段时间，尽管我对js不是很好：）没问题。完成后共享Plunkr，我可以帮助您快速完成。但是，如果我想在UI中搜索用户名、用户角色，并像问题的最后一个示例那样显示适当的结果，该怎么办？必须在控制器中添加一个过滤器吗？我喜欢你的普通解决方案，只是因为IE不支持它，因为
find（）
@user30552526谢谢。您的担心是对的，但我相信这些不应该阻止您使用现代编码技术。关于较旧的浏览器，您可以选择插入polyfill，如
Array.prototype.find | | |（Array.prototype.find=apFindShim）这里看起来我很喜欢你的香草解决方案，除了IE不支持它，因为
find（）
@user30552526谢谢。您的担心是对的，但我相信这些不应该阻止您使用现代编码技术。关于较旧的浏览器，您可以选择插入polyfill，如
Array.prototype.find | | |（Array.prototype.find=apFindShim）这里是它的样子
var role = _.find(userRoles, function(role) { 
            return role.roleName == 'Tester'; 
        });
_.find(Usernames, function(user) { 
    return user.userName == 'Caroline' || _.indexOf(user.userRoleIds, role.id)>=0; 
});