I am working with a weather App using node and Ejs. Originally, after inputting the city, the information would display on the same page but I am trying to make it show on a new page called result. I have gotten to the point that the new page will load without any errors in console.log but none of the API information is appearing. It is just the HTML I have in the results file.
JS:
const express = require("express");
const https = require('https');
const ejs = require("ejs");
const bodyParser = require("body-parser");
const date = require(__dirname + "/result.js");
const app = express();
var city = {};
let weatherData = [];
app.use(bodyParser.urlencoded({
extended: true
}));
app.set('view engine', 'ejs');
app.use(express.static("public"));
app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
});
app.get("/index", function(req, res) {
res.render("index");
});
app.post("/", function(req, res) {
const query = req.body.cityName;
const apiKey = "d56f0e3ec353b519c8e1fcfff89a4326";
const units = "metric";
const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&appid=" + apiKey + "&units=" + units;
https.get(url, function(response) {
console.log(response.statusCode);
response.on("data", function(data) {
const weatherData = JSON.parse(data)
const temp = weatherData.main.temp
const feels_like = weatherData.main.feels_like
const description = weatherData.weather[0].description
const icon = weatherData.weather[0].icon
const clouds = weatherData.clouds.all
const imageURL = "http://openweathermap.org/img/wn/" + icon + "@2x.png"
const cloudsImageURL = "http://openweathermap.org/img/wn/03n@2x.png"
console.log(weatherData);
});
});
var city = query;
res.redirect("/result");
})
const content1 = "11Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc"
app.get("/result", function(req, res) {
res.render('result', {
content: content1,
description: weatherData.description,
city: weatherData.city,
temp: weatherData.temp,
feelsLike: weatherData.feels_like
});
});
app.listen(3300, function() {
console.log("Server is running on port 3300.");
});
EJS (Result page)
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Weather App</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper" class="result-pg">
<h1>The weather is currently <span class="description"><%= description %></span></h4>
<img class="weather-img" src="">
<h1>The temperature in <span class="city"><%= city %></span> is <span class="temp"><%= temp %></span> degrees. It feels more like <span class="feels-like"><%= feelsLike %></span></h1>
<p><%= content %></p>
</div>
</body>
</html>
Any help would be appreciated.
You're setting a local variable weatherData
to the response from the API. You need to put it in the global variable that's used in the /result
function. So changed
const weatherData = JSON.parse(data)
to
weatherData = JSON.parse(data)
I'm not sure why you set all the other variables like temp
and feels_like
, since you never use them.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.