I get the data from the API key that’s stored in a venv file. I can request the weather of the date to be shown but it shows up as
” Temperature: N/A°C / N/A°F
Condition: N/A “
When I try and run the app with “flask run” through the terminal it fetches the data from the API, but through a JSON object that contains nested information. The problem is to display the data in a user-friendly format.
Here’s the code of the three files, the python file, the weather.html file and the index.html file.
<code>from flask import Flask, render_template, request
import os
from dotenv import load_dotenv
import requests
# Load environment variables from .env file
load_dotenv()
app = Flask(__name__)
@app.route('/')
def index():
api_key = os.getenv('WEATHER_API_KEY') # Ensure this is not a real key
return render_template('index.html', api_key=api_key)
@app.route('/weather_app', methods=['POST'])
def weather_app():
date = request.form.get('date')
api_key = os.getenv('WEATHER_API_KEY') # Ensure this is not a real key
api_url = "https://api.weatherapi.com/v1/history.json"
params = {
'key': api_key,
'q': "Stockholm",
'dt': date
}
response = requests.get(api_url, params=params)
if response.status_code == 200:
weather_data = response.json()
location = weather_data.get('location', {})
current = weather_data.get('current', {})
location_name = location.get('name', 'Unknown')
temp_c = current.get('temp_c', 'N/A')
temp_f = current.get('temp_f', 'N/A')
condition_text = current.get('condition', {}).get('text', 'N/A')
condition_icon = current.get('condition', {}).get('icon', '')
formatted_data = {
'location_name': location_name,
'temp_c': temp_c,
'temp_f': temp_f,
'condition_text': condition_text,
'condition_icon': condition_icon,
'date': date
}
return render_template('weather.html', weather=formatted_data)
else:
return f"Error: Unable to fetch weather data (Status Code: {response.status_code})"
if __name__ == '__main__':
app.run(debug=True)
</code>
<code>from flask import Flask, render_template, request
import os
from dotenv import load_dotenv
import requests
# Load environment variables from .env file
load_dotenv()
app = Flask(__name__)
@app.route('/')
def index():
api_key = os.getenv('WEATHER_API_KEY') # Ensure this is not a real key
return render_template('index.html', api_key=api_key)
@app.route('/weather_app', methods=['POST'])
def weather_app():
date = request.form.get('date')
api_key = os.getenv('WEATHER_API_KEY') # Ensure this is not a real key
api_url = "https://api.weatherapi.com/v1/history.json"
params = {
'key': api_key,
'q': "Stockholm",
'dt': date
}
response = requests.get(api_url, params=params)
if response.status_code == 200:
weather_data = response.json()
location = weather_data.get('location', {})
current = weather_data.get('current', {})
location_name = location.get('name', 'Unknown')
temp_c = current.get('temp_c', 'N/A')
temp_f = current.get('temp_f', 'N/A')
condition_text = current.get('condition', {}).get('text', 'N/A')
condition_icon = current.get('condition', {}).get('icon', '')
formatted_data = {
'location_name': location_name,
'temp_c': temp_c,
'temp_f': temp_f,
'condition_text': condition_text,
'condition_icon': condition_icon,
'date': date
}
return render_template('weather.html', weather=formatted_data)
else:
return f"Error: Unable to fetch weather data (Status Code: {response.status_code})"
if __name__ == '__main__':
app.run(debug=True)
</code>
from flask import Flask, render_template, request
import os
from dotenv import load_dotenv
import requests
# Load environment variables from .env file
load_dotenv()
app = Flask(__name__)
@app.route('/')
def index():
api_key = os.getenv('WEATHER_API_KEY') # Ensure this is not a real key
return render_template('index.html', api_key=api_key)
@app.route('/weather_app', methods=['POST'])
def weather_app():
date = request.form.get('date')
api_key = os.getenv('WEATHER_API_KEY') # Ensure this is not a real key
api_url = "https://api.weatherapi.com/v1/history.json"
params = {
'key': api_key,
'q': "Stockholm",
'dt': date
}
response = requests.get(api_url, params=params)
if response.status_code == 200:
weather_data = response.json()
location = weather_data.get('location', {})
current = weather_data.get('current', {})
location_name = location.get('name', 'Unknown')
temp_c = current.get('temp_c', 'N/A')
temp_f = current.get('temp_f', 'N/A')
condition_text = current.get('condition', {}).get('text', 'N/A')
condition_icon = current.get('condition', {}).get('icon', '')
formatted_data = {
'location_name': location_name,
'temp_c': temp_c,
'temp_f': temp_f,
'condition_text': condition_text,
'condition_icon': condition_icon,
'date': date
}
return render_template('weather.html', weather=formatted_data)
else:
return f"Error: Unable to fetch weather data (Status Code: {response.status_code})"
if __name__ == '__main__':
app.run(debug=True)
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Data</title>
</head>
<body>
<h1>Weather Data for {{ weather.date }}</h1>
<p>Location: {{ weather.location_name }}</p>
<p>Temperature: {{ weather.temp_c }}°C / {{ weather.temp_f }}°F</p>
<p>Condition: {{ weather.condition_text }}</p>
<img src="https://cdn.weatherapi.com/weather/64x64/{{ weather.condition_icon }}" alt="Weather Icon">
<a href="/">Go back</a>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Data</title>
</head>
<body>
<h1>Weather Data for {{ weather.date }}</h1>
<p>Location: {{ weather.location_name }}</p>
<p>Temperature: {{ weather.temp_c }}°C / {{ weather.temp_f }}°F</p>
<p>Condition: {{ weather.condition_text }}</p>
<img src="https://cdn.weatherapi.com/weather/64x64/{{ weather.condition_icon }}" alt="Weather Icon">
<a href="/">Go back</a>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Data</title>
</head>
<body>
<h1>Weather Data for {{ weather.date }}</h1>
<p>Location: {{ weather.location_name }}</p>
<p>Temperature: {{ weather.temp_c }}°C / {{ weather.temp_f }}°F</p>
<p>Condition: {{ weather.condition_text }}</p>
<img src="https://cdn.weatherapi.com/weather/64x64/{{ weather.condition_icon }}" alt="Weather Icon">
<a href="/">Go back</a>
</body>
</html>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
</head>
<body>
<h1>Weather App</h1>
<form action="/weather_app" method="POST">
<label for="date">Enter a date (YYYY-MM-DD):</label>
<input type="text" id="date" name="date" required>
<button type="submit">Get Weather</button>
</form>
<p>Weather API Key: {{ api_key }}</p> <!-- Ensure API key is a placeholder -->
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
</head>
<body>
<h1>Weather App</h1>
<form action="/weather_app" method="POST">
<label for="date">Enter a date (YYYY-MM-DD):</label>
<input type="text" id="date" name="date" required>
<button type="submit">Get Weather</button>
</form>
<p>Weather API Key: {{ api_key }}</p> <!-- Ensure API key is a placeholder -->
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
</head>
<body>
<h1>Weather App</h1>
<form action="/weather_app" method="POST">
<label for="date">Enter a date (YYYY-MM-DD):</label>
<input type="text" id="date" name="date" required>
<button type="submit">Get Weather</button>
</form>
<p>Weather API Key: {{ api_key }}</p> <!-- Ensure API key is a placeholder -->
</body>
</html>
Please bear with me if Im explaining this in a bad way or leaving any information out.
I fetched weather data from an API using flask and attempted to display it on a webpage.
I expected the weather data (like temperature and condition) to be displayed in a user-friendly format on the webpage.
New contributor
Seblan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.