Check if a row already exists before pushing it to table

Question

I have a html table

<table>
  <tr ng-repeat="row in rowsproductrequests">
    <td>{{row.PRODUCTID}}</td>
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

a second table for search products :

<table>
  <tr ng-repeat="row in searchproductsList">
    <td>{{row.PRODUCTID}}</td>
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

On click I am pushing the item from the search table (Second table) to the main table (first table) : JS:

$scope.addItemAsIng = function(row){
  $scope.rowsproductrequests.push(row);
}

The items are pushed. My problem is how can I check if an item exists in the first table so I can stop pushing the same item twice.

Try to check if the element is already in your array with `$scope.rowsproductrequests.includes(row)` and if it's false push the element in your array — JeanJacques, Sep 08 '17 at 13:59
Possible duplicate of [Check if an element is present in an array](https://stackoverflow.com/questions/7378228/check-if-an-element-is-present-in-an-array) — JeanJacques, Sep 08 '17 at 14:03

Donal · Answer 1 · 2017-09-08T14:05:46.953

2

Use includes, for example:

$scope.addItemAsIng = function(row){
  if(!$scope.rowsproductrequests.includes(row)) $scope.rowsproductrequests.push(row);
}

edited Sep 08 '17 at 14:05

answered Sep 08 '17 at 14:00

Donal

31,121
10
63
72

Matthew Cawley · Answer 2 · 2017-09-12T10:16:37.167

An alternative approach

Rather than populate the second table by pushing selected items to a second array, I'd suggest using the same array but send it through a custom filter that identifies which items are selected.

How to do it

1) Create a function in your controller that sets the selected property of a given object to true:

$scope.onAvailableRowClicked = function(row){
  row.selected = true;
}

2) Then wire that up to the first table (of available objects) using the ng-click directive:

<h4>Available</h4>
<table>
  <tr ng-repeat="row in rowsproductrequests"
    ng-click="onAvailableRowClicked(row)"> 
    <td>{{row.PRODUCTID}}</td> 
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

3) Now create a custom filter that identifies all of the objects within a given array that have the selected property set to true:

app.filter("isSelectedFilter", function() {
  return function(input){
    return input.filter(function(obj){
      return (obj.selected === true);
    });
  } 
});

4) Finally, use the filter in the ng-repeat of the second table to identify selected records:

<h4>Selected</h4>
<table>
  <tr ng-repeat="row in rowsproductrequests | isSelectedFilter"> 
    <td>{{row.PRODUCTID}}</td> 
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

Benefits of this approach

You only have to maintain one array. Less variables means that your code becomes easier to read, you can see more easily what is driving the view. It's also easier to debug if things go wrong.
There's only ever one instance of each object. One source of the truth means that there's no danger of objects falling out of sync ("should I use this or that!?!?"). It also means that it's not physically possible to select an object more than once.
You can easily reuse the selected property in other parts of the view. If you wanted to highlight in the available list which objects had been selected, you could do so easily using ng-class for example. (The thought of using array comparison logic here is already giving me a headache!)

Demo

CodePen: A custom filter to identify selected records

score 0 · Answer 3 · answered Sep 08 '17 at 14:01

Approach One: One solution will be once you add the row from the second table, remove that item from the collection and add to the first table that,s how you will never get duplicate items. Second Approach: you will have to maintain an identity column in both tables based on these identity columns you need to check before adding whether this item exists.

Suraj Mangalekar · Answer 4 · 2017-09-08T14:35:53.450

0

Also you can use "indexOf()", it will return array index of your current item, if not exit it will return -1

Like

if($scope.rowsproductrequests.indexOf(row) != -1)

edited Sep 08 '17 at 14:35

answered Sep 08 '17 at 14:21

Suraj Mangalekar

1
1

Check if a row already exists before pushing it to table

4 Answers4