Failing to display data correctly fetched from Json file with Javascript .innerHTML()

Question

I'm working on a time tracking dashboard project using Css Grid and vanilla JS, which has different activity cards that display the current and previous week's hours pulled from a json file and with an event listener, but i'm struggling with the JS logic. I'm able to fetch and loop through the json data using async await, and able to log the data in the console, so the call is definitely working, but i am unable to get the data to display properly in the activity cards using.innerHTML().

Image of console showing correct data with innerhHTML and event listener

The problem is that even with the data showing in the console I am unable to display that information in the cards. I am using forEach to loop through each stat in the Json file, and have tried experimenting by adding another loop for the card sections, but this just results in the same stat being duplicated on each card. This is a fairly simple one, but i'm a bit stuck on it.

I also recognise that my code could be much more DRY, any pointers for reducing the repetition for each time duration

  statBtn.addEventListener("click", (e) => {
    const activities = document.querySelectorAll(".previous-activity");
    console.log(activities);
    const id = e.target.id;
    console.log(id);
  
    if (id === "daily") {
      btnStyles("daily");
      getData().then((stats) =>
        activities.forEach((activity) => {
              console.log(activity)
           return activity.innerHTML = `
                      <p class='curr-hrs'> ${stat.timeframes.daily.current} hrs</p>
                      <p class='previous-hrs'>Last Week - ${stat.timeframes.daily.previous} hrs</p>`;
          });
        })
      );
    } else if (id === "weekly") {
      btnStyles("weekly");
      getData().then((stats) =>
        activities.forEach((activity) => {
              console.log(activity)
           return activity.innerHTML = `
                      <p class='curr-hrs'> ${stat.timeframes.weekly.current} hrs</p>
                      <p class='previous-hrs'>Last Week - ${stat.timeframes.weekly.previous} hrs</p>`;

           
          });
        })
      );
    } else if (id === "monthly") {
      btnStyles("monthly");
      getData().then((stats) =>
        stats.map((stat) => {
          console.log(`${stat.timeframes.monthly.previous} hours`);
          //   console.log(activity);
         return activities.innerHTML = `
              <p class='curr-hrs'> ${stat.timeframes.monthly.current} hrs</p>
              <p class='previous-hrs'>Last Week - ${stat.timeframes.monthly.previous} hrs</p>`;
          console.log(activities.innerHTML);
      );
    }
  })
);

Any help will be appreciated, thanks, Evan

Answer 1

1. "activity" is more than 1 element. innerHTML should target 1 element ( https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML )

Clean up: a. Create a switch case for adding button styles b. Your request for data seems identical, so you may want to create an individual function for that

Extra: please note there's typo's in the second and third return statement (activities instead of activity)