AngularJS Avoid duplicates when updating a CRUD table (normal add to table works)

Question

I am trying to create a simple CRUD table that does not allow duplicate names. I have been able to get the duplicate to work when adding a contact to the table, but it does not seem to be working when updating the table.

Below is my simple function that verified uniqueness of a contact:

// (allowed) dupCount is 0 when adding, and 1 when in update
// mode to allow saving the contact without making any changed.
var isUnqiue = function(newContact, dupCount) {
    var returnVal = true;
    var count = 0;

    for (var contact in $scope.model.contacts) {
        if (newContact.name.toUpperCase() === $scope.model.contacts[contact].name.toUpperCase()) {
          count++;
        }
    }

    if (count > dupCount) {
        returnVal = false;
    }

    return returnVal;
}

For some reason, it the duplicate in update mode is not working at all! Even if I update 3 or 4 contacts to the same name, the 'if (count > dupCount) ... ' statement always seem to compare 1 and 1.

Here is a JSFiddle with the entire code: https://jsfiddle.net/7ay9nsLv/

Simple scenario:

Add 'Adam, Smith'
1. Edit 'Adam, Smith', Save without Changing > Good
2. Add 'Adam, Smith' again > Duplicate Error
Add 'Adam, SmithX'
3. Edit 'Adam, SmithX' to 'Adam, Smith' > Duplicate Error

Also note, that the data in the table could be sorted and all, so not sure if passing $index to the controller would be too useful (unless sorting doesn't change the data index).

developer033 · Accepted Answer · 2016-07-12 19:56:17Z

1

First you're doing something redudant in your for-loop, you can simply use the Array.prototype.forEach() method to find if the index exists:

// Use named function to stop looping correctly
var indexExists = -1;
$scope.model.contacts.forEach(function loop(contact, index) {
  if (loop.stop) {
    return;
  }
  if (contact.name.toUpperCase() === newContact.name.toUpperCase()) {
    indexExists = index;
    loop.stop = true;
  }
});

or With ES6:

var indexExists = $scope.model.contacts.findIndex(function(contact) {
  return contact.name.toUpperCase() === newContact.name.toUpperCase();       
});

or even using findIndex method of underscorejs:

_.findIndex($scope.model.contacts, function(contact) { return contact.name.toUpperCase() === newName });

Then simply check:

return indexExists == -1 && indexExists !== idx || indexExists === idx && $scope.model.contacts[indexExists].name.toUpperCase() === newName;

It will returns true only if the user doesn't exists or if it exists and it's editing itself.

Now, let's go to the error:

You've commited 2 mistakes:

You're passing the old contact to your unique function, you should pass the new contact.

Change

this:

if (isUnqiue(contact, 1)) {

for:

if (isUnqiue($scope.model.selected, 1)) {

You're attributting the $scope.error to the old contact, it should be this:

$scope.errorContact = $scope.model.selected;

DEMO

edited Jul 12, 2016 at 19:56

answered Jul 12, 2016 at 14:00

developer033

25k8 gold badges85 silver badges113 bronze badges

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

6 Comments

Dev Over a year ago

Thank you for the response! After updating the fiddle with your suggestions, I am getting a triplicate error instead of a duplicate error. jsfiddle.net/7ay9nsLv/2

developer033 Over a year ago

@Dev, include the 3rd. change in your fiddle.

Dev Over a year ago

adding the '>=' comparison makes it so I can no longer add a contact at all because it is always comparing '0 >= 0'. jsfiddle.net/7ay9nsLv/3

developer033 Over a year ago

Well, what do you want finally? If you put 0, it means you want to allow 0 dups... what's wrong?

developer033 Over a year ago

@Dev, I think I got you, give me few minutes.

|

SirCapy · Accepted Answer · 2016-07-12 16:04:54Z

0

You should catch duplicate error not on client, but on server)) Create Uniq constraint (or primary key if it doesn't exists) on UserName field. So when you trying put or post duplicate, db throws error. You can catch it and redirect on some error page, or add something error info to response, or just show backend error.

answered Jul 12, 2016 at 16:04

SirCapy

2951 silver badge12 bronze badges

Collectives™ on Stack Overflow

AngularJS Avoid duplicates when updating a CRUD table (normal add to table works)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related