Angular Loop Not Iterating Properly

Question

I've a requirement for leave management system where user can apply for leaves depending upon their allotment and using Angular with ASP.NET Web Api. Example:

UserId - Leave  - Allotment - Year
 1001  - Casual -   20      - 2019       
 1001  - Sick   -   20      - 2019
 1002  - Annual -   10      - 2019

This is pretty basic. So what I am doing whenever a user tries to apply for leave, the system gets total days from start and end date, finally checks the allotment with respect to the total days. In the front-end, user has to select a type, for which the specific allotment no should be deducted as follows:

<label for="leaveType">Leave Type</label>
<select [(ngModel)]="leaveType" [ngModelOptions]="{standalone: true}" class="form-control">
  <option value="">Please select leave</option>
  <option *ngFor="let value of leaveType" [ngValue]="value.LeaveType">
     {{value.LeaveType}}
  </option>
</select>

I am getting the leave allotment details using ASP.NET Web Api for a specific user perfectly and this is what I did:

leaveType: string;
chkLeave: number = 0;
userLeave: any;
this.dataservice.GetLeaveInfo(selectedValue).subscribe(result => { //selectedValue is another drop down value where users are being selected with user id
  this.userLeave = result;
}, error => console.error(error));

Then finally in another method using Angular, I try to verify whether there is available leave allotment for that specific leave type like this:

chkAllotment() {
var startDate = new Date(Result[0]);
var endDate = new Date(Result[1]);

const diff = endDate.getDate() - startDate.getDate();   

debugger;
for(let i = 0; i < this.userLeave.length; i++) {
    if(userLeave[i].LeaveName = this.leaveType && userLeave[i].LeaveRemains >= diff)
    this.chkLeave = 1;
  }
};

Finally I did this to check if the leave type allotment is available for the user:

if(this.chkLeave == 1) {
 alert("You can have the leave.");
} else {
 alert("Oops! You can't have the leave.");
}

Now the issue is for multiple leave allotment, the method works perfectly and verifies the allotment for single allotment like Annual. Say for user 1001, it has two leave type allotments. So when I select casual leave, for the first time it checks perfectly whether the user is eligible for the leave depending upon allotment but it stuck when I select the second leave type, say sick and the leave days exceeds the allotment no (Basically allotments are total enjoyable days). It keeps the state of the first leave and the variable chkLeave holds the number 0 or 1 depending upon the first chosen leave type. In the inspect element of the browser, I can see the details in an array for leave allotment but while verifying, the loop somehow doesn't give the expected output. Is there anything wrong with the for loop?

N.B: You can consider LeaveRemains as allotment in the conditional statement with leave name and the difference (diff). — user8512043
– user8512043, Commented Dec 7, 2019 at 14:54

Athanasios Kataras · Accepted Answer · 2019-12-07 14:56:04Z

1

Try with this change, as I noticed that you have hte chkLeave, which is not again set to 0, so it retains the 1 from the previous iteration.

chkAllotment() {
   var startDate = new Date(Result[0]);
   var endDate = new Date(Result[1]);

   const diff = endDate.getDate() - startDate.getDate();   

   debugger;
   // Re initialize the chkLeave to 0
   this.chkLeave = 0;
   for(let i = 0; i < this.userLeave.length; i++) {
       if(this.userLeave[i].LeaveName = this.leaveType && userLeave[i].LeaveRemains >= diff)
       this.chkLeave = 1;
     }
};

As an extra, the way you handle the diff might cause problems, if the leave spans more than one month.

The getDate() method returns the day of the month (from 1 to 31) for the specified date.

This means that 2019-12-01 with 2020-01-01 have 0 days diff.

Basically it could be any of the two reasons.

Edit 1:

userLeave[i].LeaveName == this.leaveType

Should most probably be

userLeave[i].LeaveType == this.leaveType

Edit 2:

To calculate the diff between two days, see the guide here. Be carefull though, as you want to have the days, without and seconds/milliseconds as it could create rounding problems.

edited Dec 7, 2019 at 14:56

answered Dec 7, 2019 at 14:43

Athanasios Kataras

26.7k6 gold badges40 silver badges67 bronze badges

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

5 Comments

Reactgular Over a year ago

There are at least two bugs in the source code. Can you find them? :)

Reactgular Over a year ago

What's wrong with this line? if(userLeave[i].LeaveName = this.leaveType && userLeave[i].LeaveRemains >= diff)

Athanasios Kataras Over a year ago

Damn, I did not spot it at once, you are quite right.

Reactgular Over a year ago

userLeave will be undefined and userLeave[i].LeaveName = this.leaveType is an assignment not a comparison.

Athanasios Kataras Over a year ago

And [ngValue]="value.LeaveType" is the bound value, not LeaveName. I should have put this in a stackblitz ;)

Collectives™ on Stack Overflow

Angular Loop Not Iterating Properly

1 Answer 1

Edit 1:

Edit 2:

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit 1:

Edit 2:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related