Есть ли способ реорганизовать этот Javascript для цикла?

Итак, первое, что я бы сделал, это вместо того, чтобы ваши элементы уже были определены, а затем устанавливали их html, вы можете иметь функцию, которая захватывает правильный элемент на основе заголовка, поэтому я предполагаю, что у вас есть что-то вроде этого:

var hours_care = document.getElementById("hours_care")

вместо этого используйте функцию, которая захватывает нужные элементы на основе заголовка. Что-то вроде этого было бы хорошо:

function getHoursAndPast (title) {
  var lowerTitle = title.toLowerCase();
  var hours = document.getElementById("hours_" + lowerTitle)
  var past = document.getElementById("past_" + lowerTitle)
  return [hours, past]
}

Эта функция возвращает массив элементов, которые вы пытаетесь получить. Затем вы можете взять это и DE-структурировать этот массив внутри вашего цикла. Я бы не стал использовать карту, потому что вы не заинтересованы в получении массива из этого. Вместо этого используйте forEach

data.forEach(datum => {
  let dataTitle = datum.title;
  let dataTimeFrames = datum.timeframes.daily;
  const [hours, past] = getHoursAndPast(dataTitle);
  hours.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`;
  past.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`;
})

Один из подходов заключается в создании объекта, содержащего ссылки на элементы HTML. Это разбивает информацию, относящуюся к данным, из цикла, что упрощает управление. Конечно, вы по-прежнему имеете дело с несколько длинным dataObj, что не идеально.

const dataObj = {
  Work: {
    hoursElement: document.getElementById('hours_work'),
    pastElement: document.getElementById('past_work'),
  },
  Study: {
    hoursElement: document.getElementById('hours_study'),
    pastElement: document.getElementById('past_study'),
  }
  // Etc....
}

for (let i = 0; i < data.length; i++) {
  let dataTitle = data[i].title;
  let dataTimeFrames = data[i].timeframes.daily;

  dataObj[dataTitle].hoursElement.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`;
  dataObj[dataTitle].pastElement.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`;
}

Использование некоторых данные-* вместо идентификаторов значительно упростило бы вашу задачу.

Учитывая этот образец HTML (найденный на вашем GitHub):

<!-- Social Card -->
<div class = "card-social">
  <div class = "card-top card-img">
    <img src = "public/images/icon-social.svg" alt = "book icon">
  </div>
  <a class = "card-bot-anchor" href = "#">
    <div class = "card-bot card__info">
      <h2>Social</h2>
      <img src = "public/images/icon-ellipsis.svg" alt = "3 dots icon">
      <p id = "hours-social" data-title = "Self Care" data-timeframe = "current" class = "hours-current margin-top1">hrs</p>
      <p id = "past-social" data-title = "Self Care" data-timeframe = "previous"  class = "past-toggle">Category Toggle</p>
    </div>
  </a>
</div>

Обратите внимание на дополнения

data-title = "Self Care" data-timeframe = "current"

Ваш цикл будет

data.forEach(activity => {
  let r = activity.title,
    t = activity.timeframes.daily;

  document.querySelector(`[data-title='${r}'][data-timeframe='current']`).innerHTML = `<p class = "hours-current">${t.current}hrs</p>`);
  document.querySelector(`[data-title='${r}'][data-timeframe='previous']`).innerHTML = `<p>Yesterday - ${t.previous}hrs</p>`;
}

И скорее всего можно отбросить id и кучу созданных для них переменных.