AngularJS Array Comparison

Question

I have got the following array of Usernames

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

And an array of userRoles.

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

What i want to get done is first concat the arrays in in Usernames and userRoles to get the following result.

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

The second thing i want is to be able to filter for the roleName and userName seperated by pipe signs. As in type something in a text box that searches for userName and roleName for example.

if i type

Caroline, Tester

The result will be

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

What is the best practice for achieving this?

Thanks

Pablo Adoue · Accepted Answer · 2016-05-31 03:12:48Z

1

Here is how I would do it. I prefer using services and take advantage of their functions to keep code clean.

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

Afterwards, you can use it on your controller: $scope.users=UserService;

And access each of the users as a separate object which can have multiple object permisions.

NOTE: Building the service (populating it) will of course depend on your app logic and controller, you could just easily remove the "load" function and just hardcode the list object by copy and pasting your arrays.

This is the approach I use to load data from API via resource.

Regards

Edit: For use on the UI, you would just call:

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

as the object information is already contained within it.

Edit 2: If you want to search your data, then you can just add a filter like this:

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

And then on the controller:

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

        return true;
    }

Hope this works for you

edited May 31, 2016 at 3:12

answered May 31, 2016 at 2:43

Pablo Adoue

1162 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3052526 Over a year ago

Hi Pablo it will be all in the controller and i will display the result in the UI. cheers

Sunil Lama Over a year ago

questions confusions and queries are supposed to be asked in comments. @pablo

user3052526 Over a year ago

Looks pretty clean will create a plunkr and share it when done, will take me a while though i am not that good with js :)

Pablo Adoue Over a year ago

No problem. Share the Plunkr when done and I can help you achive this really quick.

user3052526 Over a year ago

But what if i want to search for userName, userRole in the UI and display the appropriate results like in the last example of the question? Will have to add a filter in the controller?

|

Redu · Accepted Answer · 2016-05-31 04:46:06Z

1

I would do with pure JS like this. It won't take more than a single assignment line each.

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

answered May 31, 2016 at 4:46

Redu

26.3k6 gold badges61 silver badges84 bronze badges

2 Comments

user3052526 Over a year ago

i loved your vanilla solution except that it will not be supported by IE due to find()

Redu Over a year ago

@user3052526 Thank you. You are right with your concerns, yet i believe these shouldn't stop you from utilizing modern coding techniues. About older browsers you may chose to insert a polyfill like Array.prototype.find || (Array.prototype.find = apFindShim); Here how it looks like developer.mozilla.org/tr/docs/Web/JavaScript/Reference/…

fyasir · Accepted Answer · 2016-05-31 03:18:03Z

0

You can use lodash to achieve this.

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

answered May 31, 2016 at 3:18

fyasir

2,9902 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

AngularJS Array Comparison

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related