Get date for weather forecast (7 days) in javascript

Question

I have a loop that creates an element of each day for the next 7 days and shows the weather data for the specific date. (getting the data from API). I can't figure out how to insert in each loop the date for the day. The date should be in the span element with the id of "daily-weather"

The date format I'm trying to achieve is: "Sun" "Jan 31"

dataWeakly.daily.forEach((day, index) => {
const uvIndex: string = Math.floor(+day.uvi).toString();

if (index < 1) {
  return;
}
const markup = `
    <div class="weather-daily">
    <span id="daily-date"></span>
    <span id="daily-date"></span>

    <img id="daily-img" src=http://openweathermap.org/img/wn/${
      day.weather[0].icon
    }@2x.png alt="weather img"></img>

    <span>${toTitleCase(day.weather[0].description)}</span>

      <span id="max-weather">${formatNumber(
        day.temp.max
      )}°c\u00A0\u00A0</span><span id="min-weather">\u00A0${formatNumber(
      day.temp.min
    )}°c</span>

  <span>UV:\u00A0</span> <span id="uv-index">${uvIndex}</span>   
        </div>
  `;
document
  .getElementById("weekly-result-container")
  .insertAdjacentHTML("afterbegin", markup);

I'm afraid that can't be done in modern browsers because they protect against cross-site scripting. — FlatAssembler, Jun 14 '20 at 12:34
Use momentjs for handling days and for date display, it's way more flexible and convenient than the native Date objects. — Frax, Jun 14 '20 at 12:35

user120242 · Accepted Answer · 2020-06-14T12:49:07.667

OpenWeatherMap API

Intl.DateTimeFormat

Using the timestamp (in seconds) in dt and Date.prototype.toLocaleString()

dataWeakly.daily.forEach((day, index) => {
const uvIndex: string = Math.floor(+day.uvi).toString();

if (index < 1) {
  return;
}

const markup = `
    <div class="weather-daily">
    <span id="daily-date">${new Date(day.dt*1000).toLocaleString('en-US',{weekday:'short',month:'short',day:'numeric'})}</span>
    <span id="daily-date"></span>

    <img id="daily-img" src=http://openweathermap.org/img/wn/${
      day.weather[0].icon
    }@2x.png alt="weather img"></img>

    <span>${toTitleCase(day.weather[0].description)}</span>

      <span id="max-weather">${formatNumber(
        day.temp.max
      )}°c\u00A0\u00A0</span><span id="min-weather">\u00A0${formatNumber(
      day.temp.min
    )}°c</span>

  <span>UV:\u00A0</span> <span id="uv-index">${uvIndex}</span>   
        </div>
  `;
document
  .getElementById("weekly-result-container")
  .insertAdjacentHTML("afterbegin", markup);

that gives me the format thanks! but it does not give me the accurate date for the day — dor_sam, Jun 14 '20 at 12:37
does it work now? they give seconds not ms, so *1000 was needed — user120242, Jun 14 '20 at 12:43
yes, thank you! works perfectly- I'll take a look on how you did it !! — dor_sam, Jun 14 '20 at 12:47

score 0 · Answer 2 · answered Jun 14 '20 at 12:45

As recommended in the comments. Momentjs can help you

const dataWeakly = {
  daily: [
    {
      uvi: 1,
      dt: moment("2016-01-31").toDate().valueOf(),
      temp: {
        min: 12,
        max: 24
      },
      weather: [{
        description: 'sunny',
        icon: 'sunny.png'
      }]
    }
  ]
}

const toTitleCase = (value) => value[0].toUpperCase() + value.slice(1);
const formatNumber = (value) => value.toString(2);

dataWeakly.daily.forEach((day, index) => {

  const uvIndex = Math.floor(+day.uvi).toString();
  const dayFormatted = moment(day.dt).format("ddd MMM D")

  const markup = `
    <div class="weather-daily">
    <span id="daily-date">${dayFormatted}</span>
    <span id="daily-date"></span>

    <img id="daily-img" src=http://openweathermap.org/img/wn/${
      day.weather[0].icon
    }@2x.png alt="weather img"></img>

    <span>${toTitleCase(day.weather[0].description)}</span>

      <span id="max-weather">${formatNumber(
        day.temp.max
      )}°c\u00A0\u00A0</span><span id="min-weather">\u00A0${formatNumber(
      day.temp.min
    )}°c</span>

  <span>UV:\u00A0</span> <span id="uv-index">${uvIndex}</span>   
        </div>
  `;
  document
    .getElementById("weekly-result-container")
    .insertAdjacentHTML("afterbegin", markup);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<div id="weekly-result-container"></div>

what is "moment" ? – Hamidreza Khorammfar Aug 24 '22 at 04:46 — Hamidreza Khorammfar, Aug 24 '22 at 04:46
that's right i didn't saw that you imported. – Hamidreza Khorammfar Aug 30 '22 at 05:51 — Hamidreza Khorammfar, Aug 30 '22 at 05:51

Get date for weather forecast (7 days) in javascript

2 Answers2