0

I have an input like this: var names = ["Ram","Shyam","Neel","Nik"]; I need to display these names in a table which will be tagged against Weekend, for Ex:

Name table

Points: -This table will keep generating the names for weekends month by month. Here is the tried code but it is not generating any result. Not sure what mistake i have made.

I am quite new to JS and tried below code, Need some help here: https://www.jdoodle.com/h/1IW

Here is the Code snippet:

const is_weekend = function(dt){
        if(dt.getDay() == 6 || dt.getDay() == 0) return true;
        else false;
    }

var array = ["Tom","Taylor","Nick","John"];
var currArrIndex = 0;

var start = new Date(); //current date
var end = new Date(start.getFullYear(), start.getMonth()+1, 0); //last date of the month
var rows = Array();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]


var currDate = start;
console.log(currDate);
while(currDate <= end){
    //alert(currDate);   
    console.log(currDate);
    if(is_weekend(currDate)){ //if the date is a weekend date
        let dayName = days[currDate.getDay()]; //get week day of the current date
        let rowElement = {
            name : array[currArrIndex], //set one of the names from array from first to last
            day : dayName,
            date : currDate.toLocaleDateString()
        }
        rows.push(rowElement);
        if(currDate.getDay() == 0){ //change after every week
            currArrIndex ++; //current index array name is already assigned to last weekend, hence move to next array name
            currArrIndex %= array.length; //if current index goes beyond array length resign to 0
        }
    }

    var newDate = currDate.setDate(currDate.getDate() + 1);
    currDate = new Date(newDate);
}

var html = "<table border='1|1'>";
for (var i = 0; i < rows.length; i++) {
    let htmlElement = `
    <tr>
    <td>${rows[i].name}</td>
    <td>${rows[i].day}</td>
    <td>${rows[i].date}</td>
    </tr>`;
    html+=htmlElement;

}
html+="</table>";
document.getElementById("box").innerHTML = html;
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Sonal
  • 27
  • 5
  • 2
    Please post your relevant "*[mcve]*" here, on this site. – David Thomas Sep 29 '21 at 13:46
  • A simple `console.log(rows.length)` right before the `for` loop would have already shown you why that one doesn't do anything ... – CBroe Sep 29 '21 at 13:50
  • @CBroe, i did console.log and saw there is nothing coming in rows from the push of rowsElement. thats is where i am confused what went wrong with rowsElement. – Sonal Sep 29 '21 at 13:51
  • @DavidsaysreinstateMonica, Added code snippet. – Sonal Sep 29 '21 at 13:52
  • I've tried the example in jdoodle and it worked right. Just I've changed the end date. Now you have the last day of this month, that is tomorrow. – Fernando Madriaga Sep 29 '21 at 13:53
  • @FernandoMadriaga, i tried this "var end = new Date("2021-09-30");". But still no result.Can you paste the date format you used. – Sonal Sep 29 '21 at 13:57
  • The `console.log(currDate);` inside your while loop should have already shown you, that you script does not even make it to Saturday, 2021-11-03, it stops one day earlier. – CBroe Sep 29 '21 at 13:59
  • You placed this log statement _before_ the part where you manipulate `currDate`, so it does not even show you what the values will be, when the condition of the while loop gets checked next time. Put `console.log(currDate, end);` _last_ in the loop, and then pay attention to the values this logs. – CBroe Sep 29 '21 at 14:01
  • Use `var rows = [];` not `var rows = Array();`. See [Javascript array best practice to use \[\] instead of new array?](https://stackoverflow.com/q/2944380/215552) – Heretic Monkey Sep 29 '21 at 15:00
  • 1
    @Sonal I've just changed to this: new Date("2021-11-30") because you have the start day setted for today, and today is wednesday and tomorrow will end the month. – Fernando Madriaga Sep 29 '21 at 16:00

1 Answers1

0

I wrote similar to this before. I edited it according to your output. Hopefully it works.

var list =[];
var persons = ["Ram","Shyam","Neel","isa","test","caglar"];
var start = new Date();
var end = new Date("2021-12-02");
var rows = [];

function test(){
    var fillCount = 0; 
    var listCount = 0;
    for (var d = start; d <= end; d.setDate(d.getDate() + 1)) {
        if(listCount == persons.length) break;
        var currdate = new Date(d);
        var dayOfWeek = currdate.getDay();
        if((dayOfWeek === 6) || (dayOfWeek  === 0)) // 6 = Saturday, 0 = Sunday
        {
           if(fillCount < 2)
           {
               console.log({"Dates": currdate.toLocaleDateString(), "Name":  persons[listCount], "Day" : currdate.toLocaleDateString("en-EN", { weekday: 'long' }) });
               list.push({"Dates": currdate.toLocaleDateString(), "Name":  persons[listCount], "Day" : currdate.toLocaleDateString("en-EN", { weekday: 'long' })  }); 
               fillCount++;

               if(fillCount == 2)  
                {
                   fillCount = 0;
                   listCount++;       
                }        
           }
        }
    }
}
Isa Ataseven
  • 166
  • 1
  • 10
  • Be wary of using `Date`s as counters in `for` loops; `d` will never equal `end` because `Date`s are compared for equality by reference, not value. – Heretic Monkey Sep 29 '21 at 15:03