window.onload doesn't run the whole function (javascript)

Question

I tried to make this function getWeekly() run by default when the site first loads but it only runs this part of the code:

dailyBtn.classList.add("active");
weeklyBtn.classList.remove("active");
monthlyBtn.classList.remove("active");

but not the loop under. But it'll show data when I click on the tags. Any ideas? Thanks.

Git link: https://github.com/thusmiley/time-tracking-dashboard.git Live site link: https://thusmiley.github.io/time-tracking-dashboard

index.html

<div class="report-bottom">
          <a href="#" id="daily" onclick="getDaily()">Daily</a>
          <a href="#" id="weekly" onclick="getWeekly()">Weekly</a>
          <a href="#" id="monthly" onclick="getMonthly()">Monthly</a>
        </div>
      </div>

      <div class="stat-wrapper">
        <div class="work-bg bg"></div>
        <div class="stat" id="work">
          <div class="category">
            <h2>Work</h2>
            <img src="./images/icon-ellipsis.svg" alt="" />
          </div>
          <div class="card">
            <h3 class="work-current"></h3>
            <p class="work-previous"></p>
          </div>
        </div>
      </div>

script.js

let Data = [];

fetch("./data.json")
  .then((response) => response.json())
  .then((data) => Data.push(...data));

  let card = document.querySelectorAll(".card");
  let dailyBtn = document.getElementById("daily");
  let weeklyBtn = document.getElementById("weekly");
  let monthlyBtn = document.getElementById("monthly");
  
  
  function getDaily() {...    }
    
    function getWeekly() {
      dailyBtn.classList.remove("active");
      weeklyBtn.classList.add("active");
      monthlyBtn.classList.remove("active");
      
      for (let i = 0; i < Data.length; i++) {
        let splitTitle = Data[i].title.split("");
        splitTitle = splitTitle.filter((e) => String(e).trim());
        let joinTitle = splitTitle.join("");
        
        let current = document.querySelector(`.${joinTitle.toLowerCase()}-current`);
        let previous = document.querySelector(
          `.${joinTitle.toLowerCase()}-previous`
          );
          current.innerHTML = `${Data[i].timeframes.weekly.current + "hrs"}`;
          previous.innerHTML = `${
            "Last Week - " + Data[i].timeframes.weekly.previous + "hrs"
          }`;
        }
      }
      
      function getMonthly() {...        }
        
        window.onload = getWeekly();

Answer 1

The very first time that you load the page Data.length is equal to 0, and that's why the loop doesn't iterate. You are using an asynchronous call to load Data, and when getWeekly() is called for the first time, Data is not ready with the info yet (and it only works after when its ready).

You should wait until Data is completely load first, you can try a callback function or even try $.when() using jquery.