Check duplicate values between multiple inputs and show error message

Question

I have list of inputs from an array created via ng-repeat. I want to check if there are any duplicated values in them. If any duplicated value found it shows an error message. I found what I was wanting in this JS FIDDLE

<tr ng-repeat="person in persons">
            <td>
                <ng-form name="personForm">
                 <div ng-class="{ 'has-error' : 
                    personForm.personName.$invalid }">
                    <input type='text'
                    name="personName"
                    ng-class="empty"
                    ng-model="person.name"
                    ng-change="verifyDuplicate()"/>
                   </div>
                 </ng-form>
                <div class='error'
                    ng-if='person.isDuplicate'>
                    Duplicate.
                </div>
            </td>

$scope.verifyDuplicate = function() {
        var sorted, i;

        sorted = $scope.persons.concat().sort(function (a, b) {
            if (a.name > b.name) return 1;
            if (a.name < b.name) return -1;
            return 0;
        });
        for(i = 0; i < $scope.persons.length; i++) {
            sorted[i].isDuplicate = ((sorted[i-1] && sorted[i-1].name == sorted[i].name) || (sorted[i+1] && sorted[i+1].name == sorted[i].name));
        }
    };

So I implemented this in my Plunker

<div ng-repeat="item in csTagGrp">
    <div ng-repeat="person in item.csTags">
      <ng-form name="personForm">
        <div ng-class="{ 'has-error' : 
                    personForm.personName.$invalid }">
          <input type='text' name="personName" ng-class="empty" ng-model="person.keys" ng-change="verifyDuplicate()" />
        </div>
      </ng-form>
      <div class='error' ng-if='person.isDuplicate'>
        Duplicate.
      </div>
    </div>
  </div>


$scope.verifyDuplicate = function() {
    var sorted, i;

    sorted = $scope.csTagGrp.csTags.concat().sort(function(a, b) {
      if (a.name > b.name) return 1;
      if (a.name < b.name) return -1;
      return 0;
    });
    for (i = 0; i < $scope.csTagGrp.csTags.length; i++) {
      sorted[i].isDuplicate = ((sorted[i - 1] && sorted[i - 1].name == sorted[i].name) || (sorted[i + 1] && sorted[i + 1].name == sorted[i].name));
    }
  };

But looks like it's not working for some reason. I am using a different nested array of objects here.What I am doing wrong here ?

Thanks in advance.

Can you paste the code here? I don't know how to open hyperlinks. — Jonathan
– Jonathan, Commented Apr 17, 2015 at 18:50

tpie · Accepted Answer · 2015-04-17 20:24:40Z

3

It doesn't work because you have the wrong key name in the sort function and you are trying to use a nested object.

Just modifying it to this will get it to work with the first object in the array. You would need to iterate through each object though to get it to work for all of them.

$scope.verifyDuplicate = function() {
    var sorted, i;

    sorted = $scope.csTagGrp[0].csTags.concat().sort(function(a, b) {
      if (a.keys > b.keys) return 1;
      if (a.keys < b.keys) return -1;
      return 0;
    });
    for (i = 0; i < $scope.csTagGrp[0].csTags.length; i++) {
      sorted[i].isDuplicate = ((sorted[i - 1] && sorted[i - 1].keys == sorted[i].keys) || (sorted[i + 1] && sorted[i + 1].keys == sorted[i].keys));
    }
  };

Because you are using a nested object, this becomes a slightly more complicated problem to solve. You have an array of objects that also have arrays in them. If you (can) put everything into a flatter object, it's simple.

The csTagGrp[0] tells it to access the first object in the csTagGrp array, which is:

{
    "csTagTitle": "Action",
    "csTags": [{
      "keys": "1",
      "tags": "Quick Win"
    }, {
      "keys": "2",
      "tags": "follow up with respondent"
    }, {
      "keys": "3",
      "tags": "process imporvement"
    }, {
      "keys": "4",
      "tags": "Large Fix"
    }, {
      "keys": "5",
      "tags": "use in presentation"
    }]
  }

So now sorted accesses the csTags array in the object at [0] in the csTagGrp array and performs the sort on all the keys in that array. So far so good. But with the object structure you have here, you need to iterate through both arrays (that is, all the objects in csTagGrp, as well as each csTags array in each csTagGrp object) and perform a sort on ALL of them. This usually involves multiple for loops.

So to accomplish this, I concat'ed all the csTags arrays (using a for loop) into a new array, preSort, which then gets passed to sort. This gives us what we need (one flat array) to check all the csTags arrays for duplicates.

  $scope.verifyDuplicate = function() {
    var preSort = [],sorted, i, c = $scope.csTagGrp;

    for(i = 0; i < c.length; i++) {
      preSort = preSort.concat(c[i].csTags);  
    }

    sorted = preSort.concat().sort(function(a, b) {
      if (a.keys > b.keys) return 1;
      if (a.keys < b.keys) return -1;
      return 0;
    });
    console.log(sorted)
    for (i = 0; i < preSort.length; i++) {
      sorted[i].isDuplicate = ((sorted[i - 1] && sorted[i - 1].keys == sorted[i].keys) || (sorted[i + 1] && sorted[i + 1].keys == sorted[i].keys));
    }
  };
});

Here is the working demo.

edited Apr 17, 2015 at 20:24

answered Apr 17, 2015 at 19:02

tpie

6,2393 gold badges24 silver badges41 bronze badges

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

3 Comments

Raihan Over a year ago

Thanks for your answer. Why I needed to add [0] here ? little explanation will help me to understand what's going on. I am not very good with this.

tpie Over a year ago

See my expanded explanation. Do you have to use that particular data structure, or can you flatten it into one array?

Raihan Over a year ago

Thanks your first example was only with one group of object and I was bit confused. I check the the latest one and it's perfect. Thanks for the explanation.

jmustonen · Accepted Answer · 2015-04-17 19:49:45Z

Unfortunately there are quite a lot of problems, but I believe none are impossible to overcome. The biggest problem lies in the difference in data structures. In the original fiddle, the data is in a simple array:

$scope.persons = [
    {name: 1},
    {name: 2},
    {name: 3}
];

whereas in your plunker, the data is (as you already mentioned) quite a lot more nested:

$scope.csTagGrp = [{
  "csTagTitle": "Action",
  "csTags": [{
    "keys": "1",
    "tags": "Quick Win"
  }, {
    "keys": "2",
    "tags": "follow up with respondent"
  }] // snipped contents for brevity
}, {
  "csTagTitle": "Topicality",
  "csTags": [{
    "keys": "6",
    "tags": "Root cause"
  }, {
    "keys": "7",
    "tags": "Symptom"
  }] // snipped contents
}, {
  // snipped rest for brevity
}]

...so you just can't use something like this (from your plunker):

sorted = $scope.csTagGrp.csTags.concat().sort(function(a, b) {
  if (a.name > b.name) return 1;
  if (a.name < b.name) return -1;
  return 0;
});
for (i = 0; i < $scope.csTagGrp.csTags.length; i++) {
  sorted[i].isDuplicate = ((sorted[i - 1] && sorted[i - 1].name == sorted[i].name) || (sorted[i + 1] && sorted[i + 1].name == sorted[i].name));
}

And the problems are:

$scope.csTagGrp is an Array of objects (that each have a csTags property), it is not an Object with a csTags property
- thus, $scope.csTagGrp.csTags is undefined -> trying to invoke concat() on undefined doesn't - naturally - work
- you could access csTags property within a single object inside $scope.csTagGrp, for example like this: sorted = $scope.csTagGrp[0].csTags.concat().sort(function(a, b) { but then again, that would sort only the first object within $scope.csTagGrp, and not all
which leads us to the next problem: the original duplicate verification works, because it just sorts a flat array. With your nested array, this approach would only work within a single group, not throughout all objects in $scope.csTagGrp
- of course this might even be your desired functionality, and in that case you'd need only minor corrections (do the sorting and comparations in a loop, each object within $scope.csTagGrp separately, and that's pretty much it)
- but if (and I suspect when) you would like to detect duplicates within each of the objects, you will need to come up with a new way to extract and sort the csTags:
  1. extract the csTags array from each object
  2. create a flat array of all the csTags arrays, i.e. looking like this:
```
[
    {"keys": "1", "tags": "Quick Win"},
    {"keys": "2", "tags": "follow up with respondent"},
    // and so on from the first object
    {"keys": "6", "tags": "Root cause"},
    {"keys": "7", "tags": "Symptom"},
    // and so on from the second object, and all the rest as well
]
```
  3. sort that flat array
  4. do the duplicate comparisons on the sorted array
and that leaves us with the final, and I guess simplest problem: you forgot to change the comparison property from the original (name) to what you have (keys)

Hopefully this helps you to move ahead!

Your answer really really helped me to understand in depth. Also your concern is correct I have to check duplicates between all of the groups and I am not allow to extract the csTags array from the main array. So is there any way I can do this keeping my array the way it already have ? any example ?
I believe you already got the help you needed from @tpie's answer and the plunker he provided. No need to extract the csTags array completely, only inside the verifyDuplicate function, and you're good to go.

Collectives™ on Stack Overflow

Check duplicate values between multiple inputs and show error message

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related