Javascript (Typescript): for loop not working properly

Question

I am working in Ionic 2 and I'm trying to make a for loop to show certain data. But it is acting very strange.

I currently have an array of "time left" using moment.js

var dur = moment.duration( moment(date).diff(moment()) );
let yearsRemain = dur.years();
let monthsRemain = dur.months();
let daysRemain = dur.days();
let hoursRemain = dur.hours();
let minutesRemain = dur.minutes();
let secondsRemain = dur.seconds();

var dateArray = [
  yearsRemain,
  monthsRemain,
  daysRemain,
  hoursRemain,
  minutesRemain,
  secondsRemain
]

If I were to output the dateArray like this.timeString = dateArray.join(","); and show timeString in my html, I can see the following values:

0,  0,  0,-17,-46, -3  //17 hours ago
0,  0,  0, 10,  7, 47  //in 10 hours 7 minutes
0,  0,  2,  1,  9, 35  //in 2 days and 1 hour

Now, I iterate through the array and I try to get the two largest values. I'm trying to show a string like I have in the comments above. If it is in the past, I want to show just the largest value.

for(var i = 0; i < dateArray.length; i++) {
  if(dateArray[i] > 0){
    //If the event is in the future
    this.state = "future";
    this.timePrimary = dateArray[i];
    this.timePrimaryType = this.typeOfTime(i, dateArray[i]);
    this.timeSecondary = dateArray[i+1] !== 0 ? dateArray[i+1] : dateArray[i+2];
    this.timeSecondaryType = dateArray[i+1] !== 0 ? this.typeOfTime(i+1, dateArray[i+1]) : this.typeOfTime(i+2, dateArray[i+2]);
    break;
  } else if(dateArray[i] < 0) {
    //If the event is in the past
    this.state = "past";
    this.timePrimary = dateArray[i] * (-1);
    this.timePrimaryType = this.typeOfTime(i, (dateArray[i] * (-1))) + " ago";
    break;
  } else {
    i++
  }
}

This loop goes through each array item and should catch the first array item that isn't a 0 . If it's larger than 0, the event is in the future and I want to capture that number and the next (if the next is zero, find the next, I'm going to upgrade this part soon).

Here's the problem

For some reason, it's skipping the hours part of the array when hours is the largest number. Take the second example from above: 0, 0, 0, 10, 7, 47 . All I see is 7 minutes and 47 seconds when it should read 10 hours and 7 minutes .

Any ideas as to why this is happening?

Just in case you feel like asking, here's the typeOfType function:

typeOfTime(type, num) {
var display;
var plur = num === 1 ? "" : "s";
switch(type) {
  case 0:
    display = "Year" + plur;
    break;
  case 1:
    display = "Month" + plur;
    break;
  case 2:
    display = "Day" + plur;
    break;
  case 3:
    display = "Hour" + plur;
    break;
  case 4:
    display = "Minute" + plur;
    break;
  case 5:
    display = "Second" + plur;
    break;
}
return display;

}

Answer 1

This is because of the else statement in your code is incrementing the counter i and that is causing the loop to skip the next item in the array when it hits a 0 . That is why 10 is skipped after 0 . Remove that part and it should work.

for(var i = 0; i < dateArray.length; i++) {
  if(dateArray[i] > 0){
    //If the event is in the future
    this.state = "future";
    this.timePrimary = dateArray[i];
    this.timePrimaryType = this.typeOfTime(i, dateArray[i]);
    this.timeSecondary = dateArray[i+1] !== 0 ? dateArray[i+1] : dateArray[i+2];
    this.timeSecondaryType = dateArray[i+1] !== 0 ? this.typeOfTime(i+1, dateArray[i+1]) : this.typeOfTime(i+2, dateArray[i+2]);
    break;
  } else if(dateArray[i] < 0) {
    //If the event is in the past
    this.state = "past";
    this.timePrimary = dateArray[i] * (-1);
    this.timePrimaryType = this.typeOfTime(i, (dateArray[i] * (-1))) + " ago";
    break;
  } else {
    //do nothing... let the loop to go on.
  }
}