Использование вложенных циклов forEach, JSON.stringify () и объекта даты

🎉 Вы можете найти новые и обновленные сообщения на ellehallal.dev

Следуя моей предыдущей записи в блоге о JSON, Async / await и сокрытии ключа API, этот блог содержит примечания об использовании:

• объект даты JavaScript
• JSON.stringify ()
• Вложенные циклы forEach

Все перечисленное ниже было реализовано при выполнении второй основной функции JavaScript-менеджера погоды: показывать на странице пятидневный прогноз Лондона.

Цель

Данные за 5 дней лондонской погоды можно получить в формате JSON. Вот пример: https://samples.openweathermap.org/data/2.5/forecast?id=524901&appid=b6907d289e10d714a6e88b30761fae22

Значение listkey представляет собой массив из 40 объектов, содержащих информацию о погоде с трехчасовым шагом для текущего дня и следующих четырех дней. В каждом объекте есть ключ с именем dt_txt, который содержит строку с датой и временем прогноза. Каждое значение уникально для 40 объектов.

"dt_txt": "2019-01-08 21:00:00"

Общая цель заключалась в том, чтобы абстрагировать данные, необходимые от выбранного объекта для отображения в index.html, такие как температура, описание температуры и значок).

Чтобы сделать это, первым шагом было создание массива, содержащего отметки времени (в том же формате, что и dt_txt) для дат и времени, для которых я хотел извлечь данные.

Создание массива меток времени

Был создан новый экземпляр класса Date, который вернул сегодняшнюю дату. Затем это использовалось при создании объектов Date в течение следующих четырех дней, а затем использовалось для создания nextFourDaysarray:

const oneDay = 1000 * 60 * 60 * 24;
const today = new Date();
const todayPlus1 = new Date(today.getTime() + (oneDay));
const todayPlus2 = new Date(today.getTime() + (oneDay * 2));
const todayPlus3 = new Date(today.getTime() + (oneDay * 3));
const todayPlus4 = new Date(today.getTime() + (oneDay * 4));
const nextFourDays = [todayPlus1, todayPlus2, todayPlus3, todayPlus4]

Преобразование объекта Date в строку

Вышеупомянутый создал массив объектов Date, где каждая дата будет отформатирована следующим образом:

2019-01-12T16:54:56.426Z

JSON.stringify() использовался для преобразования его в строку. .substring()method использовался только для извлечения части даты:

let dateStrings = [];
nextFourDays.forEach(function(date) {
  const dateToString = JSON.stringify(date)
  dateStrings.push(dateToString.substring(1, 11))
});
----
dateStrings = ['2019-01-11', '2019-01-12', '2019-01-13', '2019-01-14']

Использование вложенных циклов forEach для объединения данных из двух массивов

Следующим шагом было создание массива, содержащего 16 строк. Каждая строка будет содержать извлекаемые приращения даты и времени. Был создан массив временных приращений:

const times = ['00:00:00', '06:00:00', '12:00:00', '18:00:00']

Затем цикл forEach, проходящий через массив times, был вложен в другой цикл forEach. Это итерация по массиву dateStrings. Каждый раз время и дата помещались в переменную экземпляра datesAndTimes

dateStrings.forEach((date) => {
  times.forEach((time) => {
    this.datesAndTimes.push(date + ' ' + time)
  })
})

Результат:

this.datesAndTimes = [
        '2019-01-11 00:00:00',
        '2019-01-11 06:00:00',
        '2019-01-11 12:00:00',
        '2019-01-11 18:00:00',
        '2019-01-12 00:00:00',
        '2019-01-12 06:00:00',
        '2019-01-12 12:00:00',
        '2019-01-12 18:00:00',
        '2019-01-13 00:00:00',
        '2019-01-13 06:00:00',
        '2019-01-13 12:00:00',
        '2019-01-13 18:00:00',
        '2019-01-14 00:00:00',
        '2019-01-14 06:00:00',
        '2019-01-14 12:00:00',
        '2019-01-14 18:00:00'
]

Здорово! Теперь у меня был массив временных меток, отформатированных так же, как dt_txt.

Ресурсы: