For looping through array doesn't return correct result

Question

I'm comparing a variable with an array: $scope.object.id and $scope.groepen.id with an if statement after using a for loop. If $scope.object.id is exactly the same as one of the IDs of $scope.groepen.id, then it should make that index of $scope.overlap true.

I'm using another if check to see if anything of $scope.overlap is true. If one element of $scope.overlap is true, it will make $scope.bestaand true. Else it should make it false.

for (var i = 0; i < $scope.groepen.length; i++) {
  if ($scope.object.id === $scope.groepen[i].id) {
    $scope.overlap[i] = true;
    if ($scope.overlap[i]) {
      $scope.bestaand = true;
    }
    else {
      $scope.bestaand = false;
    }
  }
  else {
    $scope.overlap[i] = false;
  }
}

My console log shows me that $scope.overlap does in fact show the correct values (so if nothing is the same, all indexes are false). $scope.bestaand does turn to true if something is the same, but it doesn't change back to false.

I'm using Angular form validation to show if the check is working or not shown here:

<div class="col-md-3" ng-class="{ 'has-error' : bestaand }">
    <label class="control-label" for="textinput">Groepsnaam</label> 
    <input id="groepen" name="groepen" type="text" class="form-control input-md" ng-model="object.id" ng-minlength="4" ng-maxlength="16" ng-change="checkOverlap()" required>
    <p ng-show="bestaand" class="help-block">Deze groepsnaam bestaat al!</p>                            
</div>

What am I doing wrong here?

Edit:

I have changed the place of my if statements. Updated code shown here:

for (var i = 0; i < $scope.groepen.length; i++) {
  if ($scope.object.id === $scope.groepen[i].id) {
    $scope.overlap[i] = true;
  }
  else {
    $scope.overlap[i] = false;

  }
  if ($scope.overlap[i]) {
      $scope.bestaand = true;
      console.log("works")
  }
  else {
    $scope.bestaand = false;
    console.log("doesnt work")
  }
}

The console log shows me this:

It seems that it does become true, but it gets overwritten (I have input a value that is the same as the second value of the array). If I input a value that is the same as the LAST value of the array, it does work.

Answer 1

Your problem is that you've enclosed if ($scope.overlap[i]) { inside if ($scope.object.id === $scope.groepen[i].id) { so $scope.overlap will always be true. This means $scope.bestaand will only ever be set to true or left as undefined. What you actually want is -

for (var i = 0; i < $scope.groepen.length; i++) {
  if ($scope.object.id === $scope.groepen[i].id) {
    $scope.overlap[i] = true;
  }
  else {
    $scope.overlap[i] = false;
  }
  if ($scope.overlap[i]) {
    $scope.bestaand = true;
  }
  else {
    $scope.bestaand = false;
  }
}

Edit If you want to set $scope.bestaand to true if any of your $scope.overlap elements is true then you will want something a little different -

$scope.bestaand = false;
for (var i = 0; i < $scope.groepen.length; i++) {
  if ($scope.object.id === $scope.groepen[i].id) {
    $scope.overlap[i] = true;
  }
  else {
    $scope.overlap[i] = false;
  }
  if(!$scope.bestaand) {
    if ($scope.overlap[i]) {
      $scope.bestaand = true;
    }
  }
}

Answer 2

This is because else statement is unreachable:

$scope.overlap[i] = true;

if ($scope.overlap[i]) {
  $scope.bestaand = true;
}
else {
  console.log('UNREACHABLE');
  $scope.bestaand = false;
}

As for your edited question:

Your $scope.bestaand indicate an error, so I assume that if it be false once it should never be true.

So you need to rewrite your loop as follows:

$scope.bestaand = false;
for (var i = 0; i < $scope.groepen.length; i++) {
  if ($scope.object.id === $scope.groepen[i].id) {
    $scope.overlap[i] = true;
  } else {
    $scope.overlap[i] = false;
  }

  if ($scope.overlap[i] && !$scope.bestaand) {
    $scope.bestaand = true;
  }
}