Este es un proyecto de prueba que estoy usando para aprender Javascript. Tengo un ciclo for con declaraciones if después de eso, que van a innerHTML. Aquí hay un bucle for a continuación. Me pregunto si ¿cómo puedo hacer esto con, por ejemplo, map ()? He buscado en línea sobre cómo usar mapas (), pero nada muestra cosas que son un poco más complejas que la comprensión de principiantes... que soy un principiante.
for (let i = 0; i < data.length; i++) { let dataTitle = data[i].title; let dataTimeFrames = data[i].timeframes.daily; if (dataTitle === 'Work') { hours_work.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`; past_work.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`; } if (dataTitle === 'Study') { hours_play.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`; past_play.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`; } if (dataTitle === 'Play') { hours_study.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`; past_study.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`; } if (dataTitle === 'Exercise') { hours_exercise.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`; past_exercise.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`; } if (dataTitle === 'Social') { hours_social.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`; past_social.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`; } if (dataTitle === 'Self Care') { hours_care.innerHTML = `<p>${dataTimeFrames.current}hrs</p>`; past_care.innerHTML = `<p>Yesterday - ${dataTimeFrames.previous}hrs</p>`; } }Este código funciona bien, solo quiero aprender a refactorizar algo como esto.
Aquí está el repositorio para una mayor comprensión si lo desea: https://github.com/tmerrick17/time-tracking-dashboard
Entonces, lo primero que haría es en lugar de tener sus elementos ya determinados y luego configurar su html, puede tener una función que tome el elemento correcto según el título, así que imagino que tiene algo como esto:
var hours_care = document.getElementById("hours_care")en su lugar, tenga una función que tome los elementos correctos según el título. Algo como esto estaría bien:
function getHoursAndPast (title) { var lowerTitle = title.toLowerCase(); var hours = document.getElementById("hours_" + lowerTitle) var past = document.getElementById("past_" + lowerTitle) return [hours, past] } Esta función devuelve una matriz de los elementos que está tratando de obtener. Luego puede tomar eso y DE-estructurar esta matriz dentro de su ciclo. No usaría el mapa, porque no está interesado en recuperar una matriz de esto. En su lugar, use 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>`; })Un enfoque es crear un objeto que contenga las referencias a los elementos HTML. Esto desglosa la información específica de los datos del bucle, lo que facilita su gestión. Por supuesto, todavía te queda lidiar con el dataObj algo largo, que no es lo ideal.
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>`; }Usar algunos datos-* en lugar de identificadores simplificaría mucho su tarea.
Dada esta muestra de HTML (que se encuentra en su 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>Fíjate en los complementos
data-title="Self Care" data-timeframe="current"Tu bucle sería
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>`; }Y lo más probable es que pueda descartar las identificaciones y el conjunto de variables creadas para ellas.