Access the OpenWeatherMap API to retrieve the weather forecast for a single time slot within a 5-day period

Utilizing the openweathermap api, I am retrieving a 5-day/3-hour forecast here.

The API call provides multiple results for each day with data available every 3 hours. For the full JSON response, you can access it here. Please note that the API key is only for testing purposes.

{
"cod": "200",
"message": 0.0034,
"cnt": 37,
"list": [
{
"dt": 1518512400,
"main": {
"temp": 23.79,
"temp_min": 21.5,
...
// Remaining JSON data not included for brevity

My issue arises as I specifically require data for the "12:00" time slot for each day, yet the returned data contains multiple time slots throughout the day.

I've attempted the following approach but have not been successful:

getData(){
    var arraycontainsMidday;
    this.http.get('https://api.openweathermap.org/data/2.5/forecast?id=3362024&APPID=bbcf57969e78d1300a815765b7d587f0&units=metric').map(res=>res.json()).subscribe(data => {
    this.items = data;
      for(var i = 0; i < this.items.list.length; i++){
        this.dates = this.items.list[i].dt_txt.substring(10);
        this.temps = this.items.list[i].main;
        //if 12 o'clock middat is found
        arraycontainsMidday = (this.dates.indexOf("12:00:00") > -1);
      }

      for(var j = 0; j < this.items.list.length; j++){
        this.temps = this.items.list[j].main.temp;
      }

    })
  }

Answer №1

I encountered the same issue as well, but I managed to find a solution.

const groupByDay = (data) => {
    const groupedData = {}
    data.forEach((entry) => {
        const date = entry.dt_txt.split(' ')[0]
        if (!groupedData[date]) {
            groupedData[date] = entry;
        }
    })
    return Object.values(groupedData)
}

Make sure to apply this function before assigning the data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js scheduler library for triggering events based on time in a cron-like fashion

Currently, I am utilizing Node.js to develop a web application. My aim is to trigger events at specific times. While I am aware of using setTimeout and computing the time difference from the present moment, this method does not account for various timezone ...

Disable the default marker in Mapbox Geocoder

As a newcomer in the world of ReactJS and Mapbox GL JS, I am working on a project where I have successfully integrated a map with Geocoder, Navigation Controls, and Markers based on locations from a JSON file. However, I encountered an issue - whenever I s ...

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

Is there a way to create a code that will call one function, let's say toStart(), and then immediately call another function, toStop(), exactly two seconds after the first function is initiated? I want this process to continue until a specific button, ...

Is it possible to pass the chart type as a property when using vue-chart.js?

Is it possible to pass the chart type as a property with vue-chart.js? I would love to see some example source code. Can you please provide guidance on this? ...

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

Why is my NextJs app loading slowly on Safari but quickly on Chrome?

Currently, I am in the process of developing a web app using nextjs. I have encountered some issues with linking to pages, particularly the home page which contains multiple svgs and images. The performance lags when using Safari, as it does not show a loa ...

Learn how to effectively display checkboxes in an HTML form with Vue configuration

new Vue({ el: '...', data: { checkeditems: [] } }) <div v-for="item in instituteModel" v-if="instituteModel.length > 0"> <input type="checkbox" id="item.id" value="item.inst_name" v-model="checkeditems"/> </div&g ...

What is causing styled-components to include my attributes in the DOM?

In various parts of my code, there is a snippet like this: import React from 'react' import styled from 'styled-components' type PropsType = { direction?: 'horizontal' | 'vertical' flex?: number | string width ...

Using Conditions in AngularJS: Choosing Between Callbacks and Promises in a Service

I am currently faced with a specific scenario where I am uncertain whether to implement a callback or a promise. As someone who is relatively new to promises and just beginning to grasp their concept, I want to avoid falling into any potential anti pattern ...

Dynamically loading iframes with JQuery

I have implemented a jQuery script to load another URL after a successful AJAX request. $(document).ready(function() { var $loaded = $("#siteloader").data('loaded'); if($loaded == false){ $("#siteloader").load(function (){ ...

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

I have a single datatable and was wondering how to implement tooltips for when hovering over table cells. I tried the following code snippet, which successfully populated the tooltips. However, I am interested in achieving the same functionality using Angu ...

A guide on truncating a portion of a string within a PHP two-dimensional array

Given an array named $arr, the task is to trim each element from ['name'] to a specified length and then append additional characters. I successfully achieved this with a regular array, but encountered difficulties when working with a two-dimensi ...

When a string begins with the "<" character, jQuery regex is unable to find a match

I am attempting to check if a string starts with the "<" character, but I am running into issues. The expression works perfectly fine on regex101.com, however, it fails when used in my personal files. When I input a backslash everything works as expect ...

The .value property on the form group displays numeric values as either null or an empty string

I'm encountering an issue with extracting data from a form group. Within my code, there is a formGroup named lineitemForm, and I am attempting to structure this form group as follows: private formatTransferData() { const depositDates = this.get ...

Retrieve the chosen option index using AngularJS

It is common knowledge that a select list can have multiple options, each starting from [0]. For example: [0]<option>E.U</option> [1]<option>India</option> [2]<option>Peru</option> In my Angular application, I am using ...

FluentAssertion: Ensuring Common Elements Exist Between Two Lists

By default, I am provided with expected and actual responses in JSON object format. In this scenario, there are two lists that need to be checked for at least one common element. The function should have the following structure: (expectedResponse, actual ...

Divide text to reduce its width within the confines of a specific height on a div element

I've spent the past week scouring various forums, including stackoverflow, but I haven't been able to find a solution. In my responsive website, I'm using CSS flexbox to display dynamic menu items. Sometimes the text can be quite long, and ...

Displaying a tableview of images converted from an array of base64 strings

I am facing an issue with binding images in base 64 format from an array to a table view. I attempted using the code snippet below to convert base 64 strings to image: UIImage *image = [UIImage imageWithData:[NSData dataFromBase64String:result]]; Howeve ...

Working with JSON Data in C# Classes

I have a JSON file containing a list of items that I would like to convert into properties for a class. Here is an example: { "id": "cmnsz41@fhfitsocj0wgjeajkgbd#4c4mgkf1vwbh_", "displayName": "Archive", " ...

Choose a looping function in React JS that iterates over an array of objects

I have an array of objects let arr = [0: {received: "Return Received", approved: "Approved", rejected: "Rejected"} 1: {authorized: "Authorized", received: "Return Received"}} I am looking to populate a < ...