Как получить отдельный суточный массив из массива API погоды, который дает отчет за 5 дней каждые 3 часа

Question

Пожалуйста, проверьте, если вы можете помочь кому-либо.Я работал над моим погодным приложением, которое я строю на React, используя axios с openweathermap.org , и я немного застрял, чтобы получить данные так, как мне нужно.Я использую его 5-дневный прогноз.Он дает вам отчет с прогнозом каждые 3 часа в течение 5 дней. Он дает вам 40 отчетов за 5 дней.таким образом, вы получаете 8 отчетов за 3 дня между текущим и пятым, а остальные - исходя из того, сколько времени осталось на текущий день.Это ответ API для отчета: report .Таким образом, вы получите это как ответ:

{
  "data": {
"cod": "200",
"message": 0.0062,
"cnt": 39,
"list": [
  {
    "dt": 1540177200,
    "main": {
      "temp": 24.55,
      "temp_min": 20.88,
      "temp_max": 24.55,
      "pressure": 1008.67,
      "sea_level": 1025.96,
      "grnd_level": 1008.67,
      "humidity": 58,
      "temp_kf": 3.67
    },
    "weather": [
      {
        "id": 800,
        "main": "Clear",
        "description": "clear sky",
        "icon": "02d"
      }
    ],
    "clouds": {
      "all": 8
    },
    "wind": {
      "speed": 3.82,
      "deg": 340.5
    },
    "sys": {
      "pod": "d"
    },
    "dt_txt": "2018-10-22 03:00:00"
  },
  {
    "dt": 1540188000,
    "main": {
      ...
    },
  },
  {
    "dt": 1540198800,
    "main": {
     ...
    },
  },
  {
    "dt": 1540587600,
    "main": {
      . . .
    }
  }
]
}

Я просто суммировал это. Я просто вставил все данные для первого элемента, а для остальных я вставил ... и это длинный массивс 40 предметов.Каждый из них имеет уникальную метку времени даты, которая в начале обозначается как «dt».Мне нужно получить 5 массивов на основе определенного дня.для этого я подумал о преобразовании метки времени (dt), а затем получить все элементы, которые приводят к одному и тому же «дню».Преобразуйте метку времени следующим образом (используя forEach для всех элементов):

 let day ='';
 day = new Date(dt *1000);
 day = day.getDate();

При получении преобразованного массива возникают две проблемы:

• Я снова получаю один большой массив с 40 элементамино мне нужно 5 массивов, основанных на дате, чтобы у меня был отчет за каждый день отдельно
• Во-вторых, я теряю точку в метке времени.Мне нужно сохранить это, чтобы я мог показать прогноз погоды в моем приложении.

Я хочу показать информацию, основанную на этой отметке времени, в течение 5 дней отдельно.

Спасибо за вашу помощь и идеи всем.

Answer 1

Вы можете сделать это, сначала создав объект для хранения отчетов за каждый день с текущей даты до 5 дней в будущем.Затем выполните итерацию по элементам "list" и поместите каждый (отчет) в правильное место в объекте.

Вот пример:

Обратите внимание, что response в этом коде равнок данным, включенным в ваш вопрос.

const today = new Date();
const day = 60 * 60 * 24 * 1000;

const dateBins = {};
const nBins = 6; // there can be reports for up to 6 distinct dates

for (let i = 0; i < nBins; i++) {
    // set up a bin (empty array) for each date
    const date = new Date(today.getTime() + i * day);
    dateBins[date.getDate()] = [];
}

const reports = response.data.list;
for (const report of reports) {
    const reportDate = new Date(report.dt * 1000).getDate();
    dateBins[reportDate].push(report);
}

Изменение объявления today на new Date('2018-10-21T00:00:00.000Z') позволит этому коду работать с конкретными данными, которые вы опубликовали.

Результат dateBins с указанными вами данными:

{ '21':
    [ { dt: 1540177200,
       main: [Object],
       weather: [Array],
       clouds: [Object],
       wind: [Object],
       sys: [Object],
       dt_txt: '2018-10-22 03:00:00' },
     { dt: 1540188000, main: {} } ],
  '22': [ { dt: 1540198800, main: {} } ],
  '23': [],
  '24': [],
  '25': [],
  '26': [ { dt: 1540587600, main: {} } ] }

Answer 2

Я просмотрел множество вариантов, и уменьшить был мой ответ.Мне нужно было перегруппировать свой ответ на основе одного значения, которое было днем, поскольку у меня было 5 дней, поэтому у меня был бы массив, сгруппированный по дням, содержащий всю информацию за тот же день.Мне также нужно было сохранить свою временную метку, так как мне нужно было время дня для этого отчета.

 // get the weather data and recreate an array 
// having day and time(hour in my case) in the new array

        const allData = [];
        Object.entries(weatherInfo).forEach(([key, value]) => {
            const dateTime = new Date(value.dt * 1000);
            const day = dateTime.getDate();
            const time = dateTime.getHours();
            // recreate objects of the array adding time anda day and 
            // keeping timestamp and the rest of the info
            const item = {
                day: day,
                time: time,
                ...value
            };
            allData.push(item);
            return allData;
        });

Затем у меня есть новый массив, который я могу использовать, уменьшить, благодаря этому ответу иполучить результат, который я искал:

// Now reduce it to an array grouped by day
    const groupedByDay = "day";
    const groupedArray = allData;
    const groupBy = (groupedArray, groupedByDay) => {
        return groupedArray.reduce((acc, obj) => {
            const key = obj[groupedByDay];
            !acc[key] ? (acc[key] = []) : acc[key].push(obj);
            return acc;
        }, {});
    };
    console.log(groupBy(groupedArray, groupedByDay));

Я могу просто удалить эти два определения const сверху и сделать это:

    const groupBy = (groupedArray, groupedByDay) => {
        return groupedArray.reduce((acc, obj) => {
            const key = obj[groupedByDay];
            !acc[key] ? (acc[key] = []) : acc[key].push(obj);
            return acc;
        }, {});
    };
    console.log(groupBy(allData, 'day'));

Answer 3

// попробуйте ваш код в формате dt_text, используя приведенный ниже код, а затем используйте его // Я попробовал ваш код, он меня не определил

console.log(formatDate("2014-07-23 09:00:00"));
function formatDate(date) {
    let d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = '' + d.getFullYear();
    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return formattedDate = year + month + day;
  }