用javascript获取天气预报日期(7天)

Question

我有一个循环，它为接下来的7天创建一个每天的元素，并显示特定日期的天气数据。(从API获取数据)。我不知道如何在每个循环中插入一天的日期。日期应该在span元素中，其id为“每日天气”。

我试图实现的日期格式是："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);

Answer 1

如评论中建议的那样。妈妈可以帮你

​

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>

​