Weather API data request - node.js

Question

I have this ejs template that inputs the name of the city, the city gets stored into the database and then display the related weather result. I created a controller to POST the city from that input box. The city name gets stored easily and gets a success message but it does not pass that city to the GET request into the weather API URL to display the related weather details.
Here is my controller for city:
const mongoose = require('mongoose');
const axios = require('axios');
const City = require('../models/city');
exports.addCity = (req, res, next) => {
const city = new City({
_id: new mongoose.Types.ObjectId(),
cityName: req.body.cityName
});
city
.save()
.then(result => {
console.log(result);
res.status(201).json({
message: "Created city successfully"
});
})
.catch(err => {
console.log(err);
res.status(500).json({
error: err
});
});
};
exports.getCity = (req, res, next) => {
City.find({}).then(docs => {
cities: docs.map(doc => {
return {
city: doc.cityName
}
})
let apiKey = '**************************';
var city = cities;
var url= `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
axios(url)
.then( (response) => {
var cityData = response.data;
var weather = {
city: city,
temperature: Math.round(cityData.main.temp),
description: cityData.weather[0].description,
icon: cityData.weather[0].icon
}
// var weather_data = { weather : weather };
console.log('heyyyy', weather);
res.render('index', {
weather: weather
});
})
.catch( (error) => {
console.log(error);
})
})
.catch(err => {
console.log(err);
res.status(500).json({
error: err
});
})
}
And here is the snippet of the ejs template:
<article class="media">
<div class="media-left">
<figure class="image is-50x50">
<img src="http://openweathermap.org/img/w/<%= weather.icon %>.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<span class="title"><%= weather.city %></span>
<br>
<span class="subtitle"><%= weather.temperature %></span>
<br> <%= weather.description %>
</p>
</div>
</div>
</article>
Whenever I run my localhost, it only creates the city into the database and display console with the lots of error data back with last two lines saying:
data: { cod: '404', message: 'city not found' } } }
{ _id: 5c6d4e18d1ad342458c3df64, cityName: 'mumbai', __v: 0 }
Kindly help to figure out the problem.

Answer 1

Looks like the getCity controller you provided has some syntax errors but I tried my best to work with it. Main changes are 1. the logic to find matching document and 2. the way you construct the GET query using Axios
exports.getCity = (req, res, next) => {
const cityName = req.query.cityName;
City.find({})
.then(docs => {
// 1. Find matching city document
const city = docs.find(doc => {
return doc.cityName === cityName;
});
if (city) {
const apiKey = "**********";
const url = "https://api.openweathermap.org/data/2.5/weather";
// 2. Axios GET query with params as object instead of interpolating inside url
axios
.get(url, {
params: {
q: city.cityName,
appId: apiKey
}
})
.then(response => {
const cityData = response.data;
const weather = {
city: city,
temperature: Math.round(cityData.main.temp),
description: cityData.weather[0].description,
icon: cityData.weather[0].icon
};
// Do something with weather
console.log(weather);
})
.catch(err => {
// Weather query failed
console.log(err);
});
} else {
// No city found matching cityName
}
})
.catch(err => {
// Database fetch failed
console.log(err);
});
};