Показывать название дня вместо номера из ответа Open Weather API

Question

Я играю с Open Weather API и мне удалось показать погоду на 3 дня, но я не знаю, как отобразить день вместо этого числа!

После некоторого поиска я обнаружил, что мне нужно преобразовать что-то вроде метки времени в обычное время: / но я не могу понять.

$(document).ready(function() {
  var key = "16c772c85cc7406ce72731159d78b31b";
  var city = "Pune,IN";
  var url = "https://api.openweathermap.org/data/2.5/forecast";
  $.ajax({
    url: url, //API Call
    dataType: "json",
    type: "GET",
    data: {
      q: city,
      appid: key,
      units: "metric",
      cnt: "3"
    },
    success: function(data) {
      console.log('Received data:', data) // For testing
      var wf = "";
      wf += "<h2>" + data.city.name + "</h2>"; // City (displays once)
      $.each(data.list, function(index, val) {
        wf += "<p>" // Opening paragraph tag
        wf += "<b>Day " + index + "</b>: " // Day
        wf += val.main.temp + "&degC" // Temperature
        wf += "<span> " + val.weather[0].description + "</span>"; // Description
        wf += "<img src='https://openweathermap.org/img/w/" + val.weather[0].icon + ".png'>" // Icon
        wf += "</p>" // Closing paragraph tag
      });
      $("#showWeatherForcast").html(wf);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showWeatherForcast"></div>

Спасибо

Answer 1

В ответ вы можете получить доступ к дате из отметки времени.Определите названия своих дней (например, на английском языке), преобразуйте метку времени в new Date (умножьте на 1000, чтобы получить правильную дату) и получите день, используя собственный метод.

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var d = new Date(data.list[0].dt * 1000);
var dayName = days[d.getDay()];
console.log(dayName)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var key = "16c772c85cc7406ce72731159d78b31b";
        var city = "Pune,IN";
        var url = "https://api.openweathermap.org/data/2.5/forecast";
        $.ajax({
            url: url, //API Call
            dataType: "json",
            type: "GET",
            data: {
                q: city,
                appid: key,
                units: "metric",
                cnt: "17"
            },
            success: function(data) {
                const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                const timesToDisplay = [0, 8, 16];
                let d;
                let dayName;
                var wf = "";
                wf += "<h2>" + data.city.name + "</h2>"; // City (displays once)
                $.each(data.list, function(index, val) {
                  if(timesToDisplay.includes(index)){
                    d = new Date(data.list[index].dt * 1000);
                    dayName = days[d.getDay()];
                    wf += "<p>" // Opening paragraph tag
                    wf += "<b>Day " + timesToDisplay.indexOf(index) + " (" + dayName + ")</b>: " // Day
                    wf += val.main.temp + "&degC" // Temperature
                    wf += "<span> " + val.weather[0].description + "</span>"; // Description
                    wf += "<img src='https://openweathermap.org/img/w/" + val.weather[0].icon + ".png'>" // Icon
                    wf += "</p>" // Closing paragraph tag
                  }
                });
                $("#showWeatherForcast").html(wf);
            }
        });
    });
</script>
<p id="showWeatherForcast"></p>

Answer 2

Ответ API содержит DateTime в качестве метки времени. Таким образом, вы можете использовать эту метку времени для визуализации интерфейса.

wf += "<b>DateTime " + new Date(val.dt*1000).toISOString() + "</b>: "

в ответ JSON, у вас есть список, и внутри каждого объекта они передают метку времени. Чтобы преобразовать это время в удобочитаемое человеком, вы можете умножить на 1000 (миллисекунды) и использовать для преобразования конструктор DateTime.

После того, как вы извлекли дату, отдых - прогулка по пирогу. (-_-)

День процесса извлечения

var allDays= ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var d = new Date(data.list[0].dt * 1000); // to get the DateTime. 
var dayName = allDays[d.getDay()]; // It will give day index, and based on index we can get day name from the array. 
console.log(dayName)

Надеюсь, это поможет.

 $(document).ready(function() {
        var key = "16c772c85cc7406ce72731159d78b31b";
        var city = "Pune,IN";
        var url = "https://api.openweathermap.org/data/2.5/forecast";
        $.ajax({
            url: url, //API Call
            dataType: "json",
            type: "GET",
            data: {
                q: city,
                appid: key,
                units: "metric",
                cnt: "3"
            },
            success: function(data) {
                console.log('Received data:', data) // For testing
                
                var wf = "";
                wf += "<h2>" + data.city.name + "</h2>"; // City (displays once)
                $.each(data.list, function(index, val) {
                    wf += "<p>" // Opening paragraph tag
                    wf += "<b>Day " + index + "</b>: " // Day
                    wf += "<b>DateTime " + new Date(val.dt*1000).toISOString() + "</b>: " // DateTime
                    wf += val.main.temp + "&degC" // Temperature
                    wf += "<span> " + val.weather[0].description + "</span>"; // Description
                    wf += "<img src='https://openweathermap.org/img/w/" + val.weather[0].icon + ".png'>" // Icon
                    wf += "</p>" // Closing paragraph tag
                });
                $("#showWeatherForcast").html(wf);
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showWeatherForcast"></div>

Answer 3

Вы можете найти день из отметки времени, используя приведенный ниже фрагмент.

const weekDay = new Date(val.dt * 1000).toLocaleString("en-us", {
    weekday: "long"
});

Конструктор new Date ожидает отметку времени в миллисекундах, но API возвращает отметку времени в секундах, поэтому требуется * 1000.

См. Полную реализацию ниже.

$(document).ready(function() {
  var key = "16c772c85cc7406ce72731159d78b31b";
  var city = "Pune,IN";
  var url = "https://api.openweathermap.org/data/2.5/forecast";
  $.ajax({
    url: url, //API Call
    dataType: "json",
    type: "GET",
    data: {
      q: city,
      appid: key,
      units: "metric",
      cnt: "3"
    },
    success: function(data) {
      console.log('Received data:', data) // For testing
      var wf = "";
      wf += "<h2>" + data.city.name + "</h2>"; // City (displays once)
      $.each(data.list, function(index, val) {
        const weekDay = new Date(val.dt * 1000).toLocaleString("en-us", {
          weekday: "long"
        });
        wf += "<p>" // Opening paragraph tag
        wf += "<b>Day " + index + " (" + weekDay + ")" + "</b>: " // Day
        wf += val.main.temp + "&degC" // Temperature
        wf += "<span> " + val.weather[0].description + "</span>"; // Description
        wf += "<img src='https://openweathermap.org/img/w/" + val.weather[0].icon + ".png'>" // Icon
        wf += "</p>" // Closing paragraph tag
      });
      $("#showWeatherForcast").html(wf);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showWeatherForcast"></div>