Simplfying JavaScript - Jquery

joonkidk
November 17, 2022
253 views
3 votes
3 Answers

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 class="row bottom">
   <div class="col"><span class="subtitle">-Temperature-</span></div>
   <div class="col">
     <div class="row" id="date1">Sun</div>
     <div class="row data" id="date1Temp"><b>-4&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date2">Mon</div>
     <div class="row data" id="date2Temp"><b>-5&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date3">Tue</div>
     <div class="row data" id="date3Temp"><b>-10&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date4">Wed</div>
     <div class="row data" id="date4Temp"><b>-4&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date5">Thu</div>
     <div class="row data" id="date5Temp"><b>-2&deg;</b></div>
   </div>
   <div class="col">
     <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";

Answers

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";
    });
};

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 class="row bottom">
  <div class="col"><span class="subtitle">-Temperature-</span></div>
  <div class="col">
    <div class="row date">Sun</div>
    <div class="row data dateTemp"><b>-4&deg;</b></div>
  </div>
  <div class="col">
    <div class="row date">Mon</div>
    <div class="row data dateTemp"><b>-5&deg;</b></div>
  </div>
  <div class="col">
    <div class="row date">Tue</div>
    <div class="row data dateTemp"><b>-10&deg;</b></div>
  </div>
  <div class="col">
    <div class="row date">Wed</div>
    <div class="row data dateTemp"><b>-4&deg;</b></div>
  </div>
  <div class="col">
    <div class="row date">Thu</div>
    <div class="row data dateTemp"><b>-2&deg;</b></div>
  </div>
  <div class="col">
    <hr />
  </div>
</div>

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";
    }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Simplfying JavaScript – Jquery

Answers