1

I'm generating divs for each day of the week:

var days = new Array("SUN","MON","TUE","WED","THU","FRI","SAT"); 

function generateWeekdays() {
  var d = new Date();
  var weekday = d.getDay();
  var todaysWeekday = days[weekday];

  for (var i = weekday; i < days.length; i++) {
      $('<div>' + days[i] + '</div>').appendTo('#weekdayList');

  }
}


 generateWeekdays();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="weekdayList"></div>

This generate (for example) today Wednesday and to Saturday (last index), but how can I make it generate one week, so it generates all the way to Wednesday the next week and stops after that?

Josh Adams
  • 2,113
  • 2
  • 13
  • 25
Robin
  • 740
  • 3
  • 12
  • 30

8 Answers8

4

You can use the module operator % to keep the indexes in bounds. This will make anything beyond the length of the array loop back so you can just go from 0 to the the array length add today's day to it:

var days = new Array("SUN","MON","TUE","WED","THU","FRI","SAT"); 

function generateWeekdays() {
  var d = new Date();
  var weekday = d.getDay();

  for (var i = 0; i < days.length; i++) {
     console.log(days[(i + weekday) % days.length])

  }
}
generateWeekdays()

It's not completely clear in the question but if you want to include next Wednesday, you can loop with for (var i = 0; i < days.length + 1; i++)

Mark
  • 90,562
  • 7
  • 108
  • 148
1

Instead of stopping at days.length, you can iterate for 7 (as you want for a week) times, and do a modulo (% 7) operation to get the element from days array.

var days = new Array("SUN","MON","TUE","WED","THU","FRI","SAT"); 

function generateWeekdays() {
  var d = new Date();
  var weekday = d.getDay();
  var todaysWeekday = days[weekday];

  for (var d = weekday, i = 0; i < 7; d++, i++) {
      $('<div>' + days[d % 7] + '</div>').appendTo('#weekdayList');

  }
}

generateWeekdays();
Jeevan MB
  • 148
  • 1
  • 11
1

How about cutting the days (from normal week days) and appending at the end (those days) for your week (that starts from today's day, you have to cut from there)

function getWeekDaysFromToday() {
  let days = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
  return days.concat( days.splice (0,new Date().getDay()));
}
console.log(getWeekDaysFromToday())
Koushik Chatterjee
  • 4,106
  • 3
  • 18
  • 32
0

In your for loop instead of iterating until days.length you want to just do 7 iterations and cycle back to the beginning of the array. If you set up a counter that will iterate 7 times and add an if statement in the loop to loop back to the beginning of the array if you reach the end, that should work.

A. K.
  • 150
  • 9
0

How about adding another iteration, to take into account of what today is in relation to the index of the array?

var days = new Array("SUN","MON","TUE","WED","THU","FRI","SAT"); 

function generateWeekdays() {
  var d = new Date();
  var weekday = d.getDay();
  var todaysWeekday = days[weekday];

  for (var i = weekday; i < days.length; i++) {
      $('<div>' + days[i] + '</div>').appendTo('#weekdayList');

  }
  
  for(var i = 0; i < days.indexOf(days[weekday]); i++){
     $('<div>' + days[i] + '</div>').appendTo('#weekdayList');
  }
}


 generateWeekdays();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="weekdayList"></div>
Josh Adams
  • 2,113
  • 2
  • 13
  • 25
0

Here is a quick implementation that I threw together. I used a do/while loop because you know you are always going to execute at least once. I Also limit the loop to the number of days you want to display so you could just increment that to show additional days. I also used the % (Modulus) with count and weekday to get the right value from the array.

var days = new Array("SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT");

function generateWeekdays() {
  var d = new Date();
  var weekday = d.getDay();
  var todaysWeekday = days[weekday];

  let count = 0;
  do {
    $('<div>' + days[(count + weekday) % days.length] + '</div>').appendTo('#weekdayList');

    count++;
  } while (count < 7)

}

generateWeekdays()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weekdayList">

</div>
Adam H
  • 1,750
  • 1
  • 9
  • 24
0

I took a different approach to the question. Rather than checking incrementally if I have processed 7 days, I concatenated the days list to itself, so it would be 14 days, and then starting at the current day, I splice out 7 days so I have a week, and for each of them I create a div.

I also changed it to collect the divs and append them all at the end for some performance gains.

var days = new Array("SUN","MON","TUE","WED","THU","FRI","SAT"); 

function generateWeekdays() {
  var oneWeekOfDays = days.concat(days).splice(new Date().getDay(), 7).map(function(day){
    return '<div>'+ day +'</div>';
  });
  
  $('#weekdayList').append(oneWeekOfDays);
}

generateWeekdays();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weekdayList"></div>
Taplar
  • 24,788
  • 4
  • 22
  • 35
0

let dataArr = []; //empty array

let days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];

let d = new Date();
let weekday = d.getDay(); // it'll return day number like monday is 1


for (var i = 0; i < 7; i++) {
  dataArr.push(days[(i + weekday) % days.length]); //push 7 days from today in array
}

console.log(dataArr)
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49