Search code examples
javascriptreactjsloopsforeach

How to use loop in new date function to return day of week


I have this code and I'd like to return days of week based in this constant:

    const dayOfWeek = {
              '0': 'Sun',
              '1': 'Mon',
              '2': 'Tue',
              '3': 'Wed',
              '4': 'Thu',
              '5': 'Fri',
              '6': 'Sat',
            }

 info.forEach(function (information, counter) {
            // Get date
            var dateConvert = new Date()
            var date = (dateConvert.getDay());
            // Check if first iteration or if the row is full
            if (counter === 0 || row.querySelectorAll("p").length === infoPerRow) {

              // Create new row and class
              row = document.createElement("div");
              row.classList.add("row");
              rowCity = document.createElement("h1");
              rowCity.classList.add("rowCity");

              //Append the row to the fragment
              fragment.appendChild(rowCity);
              fragment.appendChild(row);

            }
            console.log(row);
            //Update the content of row
            rowCity.innerHTML = `<h2>${name} - ${country}</h2><br><form onSubmit={this.handleDelete}><button type="submit" id="add" onClick={this.handleDelete}>Remove City</button></form><br>`;
            row.innerHTML += `<div><h3>${dayOfWeek[date]}</h3><br><h2>${iconCodes[information.icon]}</h2><br><h5>${information.temp} ºC</h5><br><h6>${information.description}</h6></div>`;
          });

I expect to have something like this in this loop. That are 8 days. The first is current day and then the next 7 days:

Mon -1.33 ºC overcast clouds

Tue -2.34 ºC broken clouds

EDIT: I did it

info.forEach(function (information, counter) {
            // Get date
            var dateConvert = new Date(information.dt)
            var date = (dateConvert.toLocaleString("en-us", { weekday: "short" }));
            console.log(date)
            // Check if first iteration or if the row is full
            if (counter === 0 || row.querySelectorAll("p").length === infoPerRow) {

              // Create new row and class
              row = document.createElement("div");
              row.classList.add("row");
              rowCity = document.createElement("h1");
              rowCity.classList.add("rowCity");

              //Append the row to the fragment
              fragment.appendChild(rowCity);
              fragment.appendChild(row);

            }
            console.log(row);
            //Update the content of row
            rowCity.innerHTML = `<h2>${name} - ${country}</h2><form onSubmit={this.handleDelete}><button class="btn" type="submit" id="add" onClick={this.handleDelete}>Remove City</button></form><br>`;
            row.innerHTML += `<div><h3>${date}</h3><br><h2>${iconCodes[information.icon]}</h2><br><h5>${information.temp} ºC</h5><br><h6>${information.description}</h6></div>`;
          });

But I get all days Tue. Like this:

Tue // Here is today, Mon 19.5 ºC clear sky

Tue // Ok here 15.62 ºC clear sky

Tue // Wed 16.01 ºC clear sky

and so on


Solution

  • I think this is what you are looking for - how to extract date from timestamp.

    const dayOfWeek = {
      0: "Sun",
      1: "Mon",
      2: "Tue",
      3: "Wed",
      4: "Thu",
      5: "Fri",
      6: "Sat"
    };
    
    const info = [
      {dt: 1644245080, temp: 0.06, description: "scattered clouds", icon: "03d"},
      {dt: 1644339600, temp: -2.34, description: "broken clouds", icon: "04d"},
      {dt: 1644426000, temp: 1.7, description: 'overcast clouds', icon: '04d'},
      {dt: 1644512400, temp: -0.06, description: 'broken clouds', icon: '04d'},
      {dt: 1644598800, temp: -2.18, description: 'light snow', icon: '13d'}
    ];
    
    
    info.forEach(function (information, counter) {
      var dayNum = new Date(information.dt * 1000).getDay();
      console.log(dayOfWeek[dayNum])
    })