Issue with the 5-day forecast from the Openweather.com API

Today marks my inaugural use of the openweather.com API for weather forecasts. My goal is to display specific information for the upcoming 5 days:

- Minimum and Maximum temperature for each day
- Weather icon
- Current weather description (Drizzle, Sunny...)

Keeping it simple and straightforward, but I seem to be encountering some rather odd outcomes. Please refer to the image below for better clarity (I suspect that these five results are from the same day, just at different timestamps due to the min/max temperature details...)

https://i.sstatic.net/8AdNm.jpg

Here's the code snippet I'm working with:

async getForecast()
    {
        let url = "https://api.openweathermap.org/data/2.5/forecast";
        let payload = 
        {
            lat: this.$app.globals.origin.lat,
            lon: this.$app.globals.origin.lng,
            units: 'metric',
            APPID: '0feb06072d87320932559f321ca221fb',
            lang:'es',
            cnt:5
        };

        let response = await axios.get(url, { params: payload });
        this.data = response.data.list;
    }

Incorporating it into my Vue.js view:

<div style="width:auto; height:100%; display:flex; align-items:center;">
                <a  style="width:auto; padding:10; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-around;" v-for="(item,index) in data" :key="index">
                    <span class="fs_smaller c_normal">{{ item.main.temp_min }} / {{ item.main.temp_max }}</span>
                    <span class="fs_smaller c_normal">{{ item.weather[0].description }}</span>
                    <img style="width:50px; height:auto;" :src="'https://openweathermap.org/img/w/'+item.weather[0].icon+'.png'">
                </a>
            </div>
javascriptvue.js

Answer №1

When accessing the API endpoint, you will receive a detailed 3-hour forecast for the upcoming 5 days:

In the response, pay attention to the dt_txt property within the list items, indicating that each item is spaced 3 hours apart.

If needed, you can opt for the daily forecast option which follows the same API format but includes '/daily' in the URL:

To extract and manipulate the values effectively, consider utilizing the following code snippet:

import _ from "lodash"
const itemsByDay = _.groupBy(response.list, item => item.dt_txt.slice(0, 10))
const extrema = _.mapValues(itemsByDay, items => ({
    min: _.min(_.map(items, 'main.temp_min')),
    max: _.max(_.map(items, 'main.temp_max')),
}))

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

Combining JS Promise.all with onDOMContentLoaded to ensure all resources are

Is there a way to efficiently retrieve a json file for data while also waiting for the dom to load in order to populate a table simultaneously? The current method I am using is slow as it waits for the dom and then performs the get request. $(document).r ...

javascriptjqueryasynchronouspromise

Utilizing the Primevue theme for a fresh new look

Update: Since I couldn't resolve the issue, I decided to switch back to Vue2 and opted for Vuetify instead of Primevue. I'm new to Vue and chose Vue3 for my project, which is related to my master's thesis. Due to a lack of UI libraries comp ...

cssvue.jsvuejs3primevue

Display a notification upon successfully submitting data in Laravel and Vue.js

Hello there; I am new to Laravel and Vue.js. I have encountered an issue when submitting a form with validation problems. The error message for a required input field, such as the "Brand Name" field, appears correctly, but after successfully submitting the ...

javascriptlaravelvue.jslaravel-5vuejs2

Angular HttpClient request fails to initiate

Overview: A button click on a form triggers the methodForm within the component. methodForm then calls methodService in the service layer. methodService is supposed to make an HTTP POST request. Problem: The HTTP POST request is not being made. However, me ...

javascriptangulartypescripthttppost

Efficiently organizing reducers into separate files in ReactJS and merging them together

My App is a simple counter app where buttons are images with their own counters. https://i.stack.imgur.com/qkjoi.png In my App.js file, I imported the reducer for the counters using the following code: import reducer from './reducers/reducerCounter&a ...

javascriptreactjsreduxreact-redux

Extract a value from a JSON object and store it in a JavaScript variable

While I understand how to input an entire JSON object into Javascript, I am unsure of how to extract a single object value and store it in a Javascript variable. For instance, if I wanted to store the value of "start_time" from the JSON object below in a ...

javascriptjson

res.cookie function is unable to set cookies in the Chrome web browser

During development, I have a basic login page running locally on my machine (http://127.0.0.1:5500/index.html) and a simple express server running at http://localhost:3003 Despite seeing the server sending my access_token in response headers, Chrome brows ...

javascriptnode.jsexpressauthenticationcookies

Tips for extracting parameters from a JSON String using JavaScript

When attempting to parse a JSON String, I am encountering an issue where the parsed value is coming up as undefined. You can view the code on this jsfiddle link. <input type="submit" onclick=testJSON() value="Test"/> <div i ...

javascriptjqueryjson

Omit child DIV element in JavaScript and the Document Object Model

I have a situation with two div elements. One is <div class="card" id="openWebsite"> and the other is a sub-division <div class="card__btn"> Here's the issue: When someone clicks on the main div, they get red ...

javascripthtmljquerydomselectors-api

Using ng-model within ng-repeat for data binding in AngularJS

My challenge is to connect a model called 'User' to a series of input fields. Since I don't know the specific fields in advance, I need to write generic code that dynamically sets up the form based on the available fields. <script> ...

javascriptangularjs

Embed a subcomponent within another component triggered by an onClick event in ReactJS

Watch this quick demo to see my project in action. So, here's the deal - I have a menu with different options, and when "Tickers" is selected, I want it to display the Tabs component. However, if any other menu option is chosen, I don't want the ...

javascriptreactjs

My goal is to retrieve the top three highest rated products

// @route GET /api/products/top // @desc Retrieve top-rated products // @access Available to the public router.get( '/best', asyncHandler(async (req, res) => { const bestProducts = await Product.find({}).sort({ rating: -1 }).limi ...

javascriptnode.jsmongodb

What is the best way to transmit two distinct sets of data from a child component to the v-model of a parent component?

Currently, I am working on a project using vuejs 2 and typescript. In this project, I need to pass two different sets of data - data and attachments - within the parent component. I am utilizing vue-property-decorator for this purpose. However, I am facing ...

javascripttypescriptvue.js

Output the JSON string retrieved from a specified URL

I'm currently working on using ajax to retrieve and parse JSON data from a specific URL. I am looking for assistance on how to store the parsed array into a variable. Any guidance or suggestions would be greatly appreciated. Thank you! function rvOff ...

javascriptjsonajax

What is the process for triggering events when the previous and next buttons are clicked?

Within the jQuery fullcalendar, there are previous and next buttons. Is there a way to trigger specific events when these buttons are clicked? ...

javascriptjqueryfullcalendar

Stop the occurrence of numerous ajax requests being triggered by clicking

Having an issue with handling multiple ajax requests. In my scenario, there is a form with a button that triggers a service upon clicking it. This service is responsible for loading a list of items into a table, but currently it only loads one item at a ti ...

javascriptajaxangularjsq

Tips for transferring the text from a textbox to a href reference

I am currently working on a webpage that includes a text box, a button, and an a element. I want to input a website URL into the text box and pass it to the a element. Here is what my code looks like so far: <a id="weburl" href="http://jquery.com/"&g ...

javascriptjqueryasp.net

Using GET Parameters in POST Requests with Laravel

I am currently utilizing jQuery AJAX to transmit map coordinates to a controller via POST method. I am now contemplating. If the current page is site.com/project/2 How can I effectively pass the 2 along with the POST data? Possible Solutions I Have Co ...

javascriptphpjqueryajaxlaravel

Reading data using the HTML5 FileReader in JavaScript allows for the extraction of information into a

Currently facing a challenge with HTML FileReader. My struggle lies in extracting the data from the FileReader, as most examples I come across utilize the data directly from the built-in function of FileReader. My goal is to retrieve the data from the file ...

javascripthtmlfilereader

Incorporate dynamic variables into your HTML code using jQuery or JavaScript

I'm struggling to generate HTML code from JavaScript/jQuery within an HTML template rendered in Django. I need to append HTML code and also insert some values in between. Currently, I am using a basic string append method like this: var features =[&ap ...

javascriptjquerydjangotemplates