Trying to render multiple API calls on the same page - node.js

Question

I'm trying to render the results of two different API calls in a node app but am running into a problem.
Here are my functions:
A disc golf course API call:
function dgcrGetReq(res, cityName) {
var courseData = {
title: "courses",
courses: null
};
var config = {
method: 'get',
url: `${dgcrUrl}?key=${dgcrKey}&mode=findloc&city=${cityName}&state=ON&country=CA&sig=${locationSig}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
axios(config)
//Await result here to collect data before sending weather request
.then(function (response){
courseData.courses = response.data;
console.log(courseData.courses);
res.render("courses", courseData);
}).catch(function (error){
console.log(error);
});
}
An open weather API call:
function getWeatherInfo(city) {
var weatherData = {
description: "",
temperature: "",
wind: ""
}
var config = {
method: 'get',
url: `https://api.openweathermap.org/data/2.5/weather?q=${city},ON,CA&appid=${weatherKey}`,
headers: { }
};
axios(config)
.then(function (response) {
weatherData.description = response.data.weather[0].description;
weatherData.temperature = (response.data.main.temp - 273.15 );
console.log(`temperature: ${weatherData.temperature}`)
console.log(JSON.stringify(response.data));
console.log(`Weather ${response.data.weather[0].main}`);
res.render( weatherData);
})
.catch(function (error) {
console.log(error);
});
}
Here is the render function:
app.get("/courses", (req, res) => {
var city = req.query.cityInput;
// console.log(city);
dgcrGetReq(res, city);
getWeatherInfo(city);
});
And here is the .pug component where the content is rendered:
extends layout
block layout-content
div.content
h1.page-title Course Listings
div#weather-info
h3 General Weather Information
p Description: #{weatherData.description}
p Temperature:
p Wind Speed:
each c in courses
div.course-container.flex-container
div.name-container.flex-container
a(href=`${c.dgcr_url}` target="_blank") <!-- Link to official DGCR page-->
h2 #{c.name}
p #{c.city}
div.detail-container
p Holes: #{c.holes}
p Average Rating:
img(src=`${c.rating_img}`)
I get the error line "Cannot read properties of undefined (reading 'description')".
If I remove the 'weatherData.description' line, then I get the error 'TypeError: Cannot read properties of undefined (reading 'app')'.
Any pointers here? Still getting used to using Node and API's.

Answer 1

There are multiple issues in your code:
getWeatherInfo calls res.render, but you don't pass res into the function (which you do with dgcrGetReq)
However, you can call res.render only once in response, because the first call to render ends the response.
So I recommend changing both getWeatherInfo and dgcrGetReq functions to return data instead of calling res.render on their own. You collect both responses and call res.render in the route handler (in the app.get("/courses", (req, res) => function).
Pay attention to the fact that both functions return a promise, so you need to wait for both promises to resolve and only then call res.render.
Sketch of solution (untested, there may be bugs):
// REMOVED res argument
function dgcrGetReq(cityName) {
// code removed for brevity
axios(config)
.then(function (response){
courseData.courses = response.data;
console.log(courseData.courses);
// HERE return those data
return courseData;
}).catch(function (error){
console.log(error);
});
}
function getWeatherInfo(city) {
// code removed for brevity
axios(config)
.then(function (response) {
weatherData.description = response.data.weather[0].description;
weatherData.temperature = (response.data.main.temp - 273.15 );
// HERE return data
return weatherData;
})
.catch(function (error) {
console.log(error);
});
}
app.get("/courses", (req, res) => {
var city = req.query.cityInput;
var renderData = null;
dgcrGetReq(city) // returns promise => use then
.then(courseData => {
renderData = courseData; // store data in outside scope so they are available later
return getWeatherInfo(city);
})
.then(weatherData => {
// add weatherData to single object which will be passed for rendering
renderData.weatherData = weatherData;
res.render("courses", renderData);
})
});
As additional improvements:
Add error handling (.catch) if dgcrGetReq or getWeatherInfo returns error
Use Promise.all to execute dgcrGetReq and getWeatherInfo independent of each other, to generate response more quickly
Avoid modifying the returned courseData (stored as renderData) object
Use async await