Exploring the Comparison of Arrays in AngularJS

Question

Exploring the Comparison of Arrays in AngularJS

I am currently working with two arrays: one for Usernames and another for userRoles. The structure of the arrays is as follows:

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 here are the userRoles:

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

My goal is to combine these arrays to achieve a specific result format. For example:

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

In addition, I want to be able to filter the array based on searches for combinations of userName and roleName separated by pipe signs. For instance, if I enter:

Caroline, Tester

The expected result would be:

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

What would be considered best practice for accomplishing this task?

Thank you!

javascript arrays angularjs

Answer 1

Answer №1

In my approach, I like to utilize services and their functions to maintain clean code.

app.service('UserService', function (PermisionsServices) {
    var self = {
        'list': [],
        'load': function (Users) {//Provide 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) {//Provide your array of permissions
            angular.forEach(permissions, function (permission) {
                self.list.push(permission);
            });
        }, '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;
});

Once set up, you can integrate it into your controller: $scope.users=UserService;

This allows access to each user as a distinct object with multiple permissions.

NOTE: The process of building the service may vary based on your app's logic and controller. You could simply omit the "load" function and input the list object directly by copying and pasting your arrays.

This is my method for retrieving data from an API using resources.

Regards

Edit: To display on the UI, simply use:

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

as all necessary information is already contained within.

Edit 2: For data search functionality, add a filter like so:

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

In the controller:

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

        return true;
    }

I hope this solution fits your needs

Answer 2

In my approach, I like to utilize services and their functions to maintain clean code.

app.service('UserService', function (PermisionsServices) {
    var self = {
        'list': [],
        'load': function (Users) {//Provide 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) {//Provide your array of permissions
            angular.forEach(permissions, function (permission) {
                self.list.push(permission);
            });
        }, '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;
});

Once set up, you can integrate it into your controller: $scope.users=UserService;

This allows access to each user as a distinct object with multiple permissions.

NOTE: The process of building the service may vary based on your app's logic and controller. You could simply omit the "load" function and input the list object directly by copying and pasting your arrays.

This is my method for retrieving data from an API using resources.

Regards

Edit: To display on the UI, simply use:

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

as all necessary information is already contained within.

Edit 2: For data search functionality, add a filter like so:

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

In the controller:

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

        return true;
    }

I hope this solution fits your needs

Answer 3

Answer №2

If I were to implement this functionality using pure JavaScript, I would write it like this. It can be achieved with just a single assignment line for each task.

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 4

If I were to implement this functionality using pure JavaScript, I would write it like this. It can be achieved with just a single assignment line for each task.

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 5

Answer №3

One way to accomplish this task is by utilizing the lodash library.

var specificRole = _.find(allRoles, function(role) { 
            return role.name === 'Tester'; 
        });
        
_.find(allUsers, function(user) { 
    return user.name === 'Caroline' || _.indexOf(user.roles, specificRole.id) >= 0; 
});

Answer 6

One way to accomplish this task is by utilizing the lodash library.

var specificRole = _.find(allRoles, function(role) { 
            return role.name === 'Tester'; 
        });
        
_.find(allUsers, function(user) { 
    return user.name === 'Caroline' || _.indexOf(user.roles, specificRole.id) >= 0; 
});

Exploring the Comparison of Arrays in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

You are not able to access the instance member in Jest

Making an asynchronous request from jQuery to a Slim Framework API endpoint

Screenshots of playwright failing to work on Github.''

VueJS component fails to properly sanitize the readme file, as discovered by Marked

Updating Rails record using Ajax with select_tag and onchange functionality

Updating elements within an array on the fly

Update the minimum date in an AngularJS input field to the current date

Error: The initial parameter must be a string, Buffer, ArrayBuffer, Array, or Array-like Object. An object type was passed in instead in CryptoJS

What is the best way to incorporate animation into a React state?

In React Router version 4, it is stated that each router is only allowed to have a single child element when using multiple routes

Using ui-select for data binding in AngularJS

Change the websocket origin to localhost in a javascript setting

What is the best way to eliminate the lower margin in the UI-Boostrap Angular Tab directive?

Utilizing Internationalization in Socket.io

What is the best way to add controllers to AngularJS?

Unable to append Jquery attribute to a div component

JavaScript can be used to arrange a table in both ascending and descending order by simply clicking on the header

Using jQuery, what is the best way to conceal a Div while the scroll bar is in motion?

Curved Edges Ensure Non-Interactive Elements

Using Chart.js to display JSON data in a graphical format