0

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 itteration 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 itteration 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

  • 1
    Does this answer your question about `Date()` and how you can add the `counter` variable to it? https://stackoverflow.com/questions/563406/how-to-add-days-to-date – savageGoat Feb 07 '22 at 14:30
  • What specific problem are you having? What does `info` contain? – Nikita Skrebets Feb 07 '22 at 14:34
  • info: 0: {dt: 1644245080, temp: 0.06, description: 'scattered clouds', icon: '03d'} 1: {dt: 1644339600, temp: -2.34, description: 'broken clouds', icon: '04d'} 2: {dt: 1644426000, temp: 1.7, description: 'overcast clouds', icon: '04d'} 3: {dt: 1644512400, temp: -0.06, description: 'broken clouds', icon: '04d'} 4: {dt: 1644598800, temp: -2.18, description: 'light snow', icon: '13d'} ... more 3 lines I tried to convert this timestamps, but it returns full date time in year 1970. So I decide to create each date manually... But if You have an idea how to fix it, I think It's better – Fernando Netto Feb 07 '22 at 14:49
  • Does this answer your question? [How to add days to Date?](https://stackoverflow.com/questions/563406/how-to-add-days-to-date) – Heretic Monkey Feb 07 '22 at 15:09

2 Answers2

1
const dayOfWeek = {
  "0": "Sun",
  "1": "Mon",
  "2": "Tue",
  "3": "Wed",
  "4": "Thu",
  "5": "Fri",
  "6": "Sat",
};
const nextDay = input => {
  const output = new Date(input.valueOf());
  output.setDate(output.getDate() + 1);
  return output;
};

let day = new Date();
for (let i = 0; i < 7; i++) {
  console.log(day.toLocaleString("en-us", { weekday: "short" }));
  console.log(dayOfWeek[day.getDay()]);

  day = nextDay(day);
}

The 2 log statements have the same output. The first produces the result you are after without the object and the second by indexing your constant

EDIT: Or to do it inside the loop you have...

let today = new Date();
const addDays = (input, days) => {
      const output = new Date(input.valueOf());
      output.setDate(output.getDate() + days);
      return output;
    };
 info.forEach(function (information, counter) {
            var day = addDays(today, counter);

            // render details
          });

And finally... directly from the info data

const info = { dt: 1644245080 };
const date = new Date(info.dt);
console.log(date.toLocaleString("en-us", { weekday: "short" }));
1

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])
})
Nikita Skrebets
  • 1,518
  • 2
  • 13
  • 19