Is the value of the object in the array already present in another array of objects?

Question

Is the value of the object in the array already present in another array of objects?

Plunker - http://plnkr.co/edit/jXdwOQR2YLnIWv8j02Yp

In my angular project, I am working on a view that displays a list of users in the main container (array-A) and a sidebar with selected users (array-B).

The first array (A) contains all users:

[{ $$hashKey: "00F", id: "118207f5e52c3eb619a8760bc08c8224", username: "John Smith" }, { $$hashKey: "00G", id: "9c2d6f31c88e7a654e64bd0d3371360a", username: "Fredy Rincon" }, { ... }]

The second array (B) holds the users already selected from Firebase database to pre-populate the sidebar. These users should appear exactly like they do in array-A.

My objective is to allow adding and removing objects from array-B/sidebar by clicking on items in array-A/main container.

I have attempted a solution but it only adds and removes items without considering the existing pre-populated users on the sidebar.

To illustrate:

$scope.selectedUsers = array-B

user = object in array-A

$scope.selectUser = function (user) {
  console.log($scope.selectedUsers.indexOf(user))
  if ($scope.selectedUsers.indexOf(user) === -1 ) {
    $scope.selectedUsers.push(user);
    console.log($scope.selectedUsers);
  } else {
    $scope.selectedUsers.splice($scope.selectedUsers.indexOf(user), 1);
    console.log($scope.selectedUsers);
  }
};

I'm unsure how to solve this issue and would appreciate any assistance. Thank you.

Thanks.

javascript arrays angularjs firebase

Answer 1

Answer №1

Utilize Array.prototype.reduce method for user validation before addition:

$scope.add = function(user){
  var match = $scope.selectedUsers.reduce(function(prev, curr) {
    return (user.id === curr.id) || prev;
  }, false);
  console.log(match ? 'match' : 'no match');
  if (!match) $scope.selectedUsers.push(user);
};

... where your template includes:

<p ng-repeat="user in users">{{user.username}} <a ng-click="add(user)">+</a></p>

To eliminate users from the selectedUsers array, use Array.prototype.splice method:

$scope.remove = function(index){
  $scope.selectedUsers.splice(index, 1)
}

...where your view is structured as follows:

<p ng-repeat="selectedUser in selectedUsers">{{selectedUser.username}}
<a ng-click="remove($index)">--</a></p>

View Working Example on Plunker

Answer 2

Utilize Array.prototype.reduce method for user validation before addition:

$scope.add = function(user){
  var match = $scope.selectedUsers.reduce(function(prev, curr) {
    return (user.id === curr.id) || prev;
  }, false);
  console.log(match ? 'match' : 'no match');
  if (!match) $scope.selectedUsers.push(user);
};

... where your template includes:

<p ng-repeat="user in users">{{user.username}} <a ng-click="add(user)">+</a></p>

To eliminate users from the selectedUsers array, use Array.prototype.splice method:

$scope.remove = function(index){
  $scope.selectedUsers.splice(index, 1)
}

...where your view is structured as follows:

<p ng-repeat="selectedUser in selectedUsers">{{selectedUser.username}}
<a ng-click="remove($index)">--</a></p>

View Working Example on Plunker

Answer 3

Answer №2

To efficiently manage your objects with unique string IDs, consider storing just the IDs in two separate arrays (array-A and array-B) and keeping a dictionary of the complete data objects in a central service. You can then utilize an angular filter to retrieve the required full data object by its ID for various purposes such as presentation.

Answer 4

To efficiently manage your objects with unique string IDs, consider storing just the IDs in two separate arrays (array-A and array-B) and keeping a dictionary of the complete data objects in a central service. You can then utilize an angular filter to retrieve the required full data object by its ID for various purposes such as presentation.

Is the value of the object in the array already present in another array of objects?

Answer №1

Answer №2

Similar questions

Presenting JSON information in a concise and visually appealing manner

Iview Table UI Cell

Preserving variable scope in JavaScript even after defining a function

What is the process for including a new item in the p-breadcrumb list?

Inquiry regarding the ng-disabled directive in AngularJS

updating rows in a table

.fetchevery(...).then has no function

Retrieving the last entity of a $resource in AngularJS using a controller

receiving a pair of components instead of just one

ng-repeat on a transcluded directive fails to show the properties of the object

Accurate representation of a JavaScript object using Node.js Express

Having trouble retrieving the value of the second dropdown in a servlet through request.getParameter

Enhance Form within React Calendar

Reconfigure a portion of a string using Vue's dynamic replacement feature

There was an error in Index.js: The UserForm component did not return anything from the render function. This typically occurs when a return statement is missing. To render nothing, you can return

Retrieve a specific item from a JSON response using Node.js

Tips for ensuring a controller function only runs once in AngularJS

Apply a class to the input element within an ng input tag

Utilizing AngularJS: Accessing the parent controller from a child component using the controllerAs syntax

Changing the structure of a JSON array in JavaScript