Populating Bootstrap table with HTML from days in a year

Viewed 111

Im trying to populate a Bootsrap table with days in a year. The goal is to produce a horizontal calendar view with assets vertically, the project is in the birth-face... and i'm new to coding so please be nice..

How can i populate the table? i get the error: days.forEach is not a function

Any help or direction would be greatly appreciated!

function daysOfAYear(year) 
{
  return isLeapYear(year) ? 366 : 365;
}
function isLeapYear(year) {
     return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
}

const days = daysOfAYear(2020);


// populate das in table...
function showDays(days) {
    let output = '';
    
    days.forEach(day => {
    output += `
    <th scope="col">${day}</th>
    `;
    });

    // Output days
    document.getElementById('date-calendar').insertBefore(output)

};
console.log(showDays(days));

This is part of my HTML:

    <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th colspan="6" class="text-center">January</th>
            </tr>
          </thead>
          <thead>
            <tr>
              <th>Name</th>
              <th>01.01</th>
              <th>02.01</th>
              <th>03.01</th>
              <th>04.01</th>
            </tr>
          </thead>
          <tbody class="date-calendar">
            <tr>
              <td>John Doe</td>
              <td>Lorem</td>
              <td>ipsum</td>
              <td>dolor</td>
              <td>sit</td>
            </tr>
            
          </tbody>
        </table>
      </div>
1 Answers

The forEach method, iterates through an array, your value days in an integer.

To fix this you need to use a for loop, some documentation here: https://www.w3schools.com/js/js_loop_for.asp

In your case, the for loop would be

for (let day = 1; day <= days; day++) {
    output += `
    <th scope="col">${day}</th>
    `;
}
Related