Simplfying JavaScript-CodePudding

I'm currently a web developer boot camp student and I am working on a project. I know there is a way to simplify this function but I can't seem to grasp it. What is the way to simplify this entire thing into a for loop so I don't have to do this to every element? I am calling a weather API and applying them to the HTMl. Also, I am using the querySelector as for some reason, JQuery doesn't want to allow me to use the $.

HTML

 <div >
   <div ><span >-Temperature-</span></div>
   <div >
     <div  id="date1">Sun</div>
     <div  id="date1Temp"><b>-4&deg;</b></div>
   </div>
   <div >
     <div  id="date2">Mon</div>
     <div  id="date2Temp"><b>-5&deg;</b></div>
   </div>
   <div >
     <div  id="date3">Tue</div>
     <div  id="date3Temp"><b>-10&deg;</b></div>
   </div>
   <div >
     <div  id="date4">Wed</div>
     <div  id="date4Temp"><b>-4&deg;</b></div>
   </div>
   <div >
     <div  id="date5">Thu</div>
     <div  id="date5Temp"><b>-2&deg;</b></div>
   </div>
   <div >
     <hr />
   </div>
 </div>

let fiveDayWeather = function (weatherValue) {
  const date1 = document.querySelector("#date1");
  const date2 = document.querySelector("#date2");
  const date3 = document.querySelector("#date3");
  const date4 = document.querySelector("#date4");
  const date5 = document.querySelector("#date5");

  const date1Temp = document.querySelector("#date1Temp");
  const date2Temp = document.querySelector("#date2Temp");
  const date3Temp = document.querySelector("#date3Temp");
  const date4Temp = document.querySelector("#date4Temp");
  const date5Temp = document.querySelector("#date5Temp");

  let todaysMonth = dayjs().$M;
  let tomorrow = dayjs().$D   1;
  let twoDaysAfter = dayjs().$D   2;
  let threeDaysAfter = dayjs().$D   3;
  let fourDaysAfter = dayjs().$D   4;
  let fiveDaysAfter = dayjs().$D   5;

  date1.innerText = `${todaysMonth}/${tomorrow}`;
  date1Temp.innerText = weatherValue.list[1].main.temp   "\u00B0 F";
  date2.innerText = `${todaysMonth}/${twoDaysAfter}`;
  date2Temp.innerText = weatherValue.list[2].main.temp   "\u00B0 F";
  date3.innerText = `${todaysMonth}/${threeDaysAfter}`;
  date3Temp.innerText = weatherValue.list[3].main.temp   "\u00B0 F";
  date4.innerText = `${todaysMonth}/${fourDaysAfter}`;
  date4Temp.innerText = weatherValue.list[4].main.temp   "\u00B0 F";
  date5.innerText = `${todaysMonth}/${fiveDaysAfter}`;
  date5Temp.innerText = weatherValue.list[5].main.temp   "\u00B0 F";

CodePudding user response：

Here you go with some comments:

let fiveDayWeather = function (weatherValue) {
  let todaysMonth = dayjs().$M;
  [...Array(5).keys()] // generate array with indexes[ 0, 1, 2, 3, 4]
    .map((k) => `date${k   1}`) // map each element to the format "date1" "date2" etc
    .forEach((id, index) => { // iterate the array with both the generated ids in the format you want and the index
      // get the elements
      const date = document.getElementById(id);
      const dateTemp = document.getElementById(id   "Temp");
      // set the day
      const day = dayjs().$D   index   1;
      // edit html content
      date.innerText = `${todaysMonth}/${day}`;
      dateTemp.innerText = weatherValue.list[index   1].main.temp   "\u00B0 F";
    });
};

CodePudding user response：

To DRY up your code you can amend your code to remove the incremental id attributes. Instead, you can use common class attributes to create common structures in your HTML which you can use DOM traversal methods, such as closest(), to find related content, something like this:

const todaysMonth = dayjs().$M;

let fiveDayWeather = function(weatherValue) {
  document.querySelectorAll('.date').forEach((date, i) => {
    const temp = date.closest('.col').querySelector('.dateTemp');
    
    date.innerText = `${todaysMonth}/${dayjs().$D   (i   1)}`;
    temp.innerText = weatherValue.list[i   1].main.temp   "\u00B0 F";    
  });
}

// dummy data set:
fiveDayWeather({
  list: [
    { main: { temp: 0 } },
    { main: { temp: 1 } },
    { main: { temp: 2 } },
    { main: { temp: 3 } },
    { main: { temp: 4 } },
    { main: { temp: 5 } },
    { main: { temp: 6 } }
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.6/dayjs.min.js" integrity="sha512-hcV6DX35BKgiTiWYrJgPbu3FxS6CsCjKgmrsPRpUPkXWbvPiKxvSVSdhWX0yXcPctOI2FJ4WP6N1zH 17B/sAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div >
  <div ><span >-Temperature-</span></div>
  <div >
    <div >Sun</div>
    <div ><b>-4&deg;</b></div>
  </div>
  <div >
    <div >Mon</div>
    <div ><b>-5&deg;</b></div>
  </div>
  <div >
    <div >Tue</div>
    <div ><b>-10&deg;</b></div>
  </div>
  <div >
    <div >Wed</div>
    <div ><b>-4&deg;</b></div>
  </div>
  <div >
    <div >Thu</div>
    <div ><b>-2&deg;</b></div>
  </div>
  <div >
    <hr />
  </div>
</div>

CodePudding user response：

Something like this should work:

let fiveDayWeather = function (weatherValue) {

    let todaysMonth = dayjs().$M;

    for( let i = 1; i < 6; i   ){

        document.querySelector( "#date"   i ).innerText = `${todaysMonth}/${ dayjs().$D   i }`;
        document.querySelector( "#date"   i   "Temp" ).innerText = weatherValue.list[i].main.temp   "\u00B0 F";
    }
}