so I’m trying to host my website on Heroku and set up everything to get my app up and running. Whenever I try to submit the form I get undefined errors.
Undefined Errors Console Errors
I’ve set it up to use the port like shown in the documenation:
app.listen(process.env.PORT || 8081, function () {
console.log('Example app listening on port 8081!');
});
When starting the app locally with heroku local web I get Typerror: Failed to Fetch and the undefined results but when I go into my .env file and add a port=8081 it works perfectly fine.
Good result
When I open it with heroku open I still have that undefined problem.
I don’t really have to set a PORT in .env right? Or do I? I read that that standard port is 80 but that didn’t work either.
Can someone please help me? Thank you!
Heres the link to the public site: https://shrouded-everglades-61993.herokuapp.com/ Here the link to my Github rep: https://github.com/stefanfeldner/capstone-travel-app
Advertisement
Answer
So the reason that they’re undefined is that they are being set by these lines in main.js:
uiData.imageURL = data[1].imageUrl; ... uiData.iconCode = data[0].iconCode;
Where data is the object you’re retrieving from your /getData endpoint. The problem is that what /getData actually returns is [{}, {}] so of course these values are both undefined, leading to that visual broken-ness.
Now, why does /getData return these empty objects? I can’t check your server logs, but there are two obvious possibilities based on the way server.js is written.
The first is that there’s an error somewhere and you’re simply not making it all the way to the end of your try-catch in callApi, so neither weatherData nor pixabayData are being updated.
Second, it’s also possible that these calls are successful but that the desired data is not in the results, i.e. that neither of these if statements are true:
if('city_name' in data) {`
...
if('hits' in data) {
Again, in this case, neither weatherData nor pixabayData are being updated.
The way that your handler for /sendFormData is written, it doesn’t check that callApi actually got any useful data, just that it has finished execution. So your code flow continues on its merry way despite the data objects still being empty.
However, there’s a bigger, unrelated design flaw here: What happens if more than one person uses your website? Your client-side code calls /sendFormData, which hopefully correctly populates the global variables weatherData and pixabayData, and then separately calls /getData to try and retrieve this data.
The thing is, though, between the time your client-side calls /sendFormData and /getData, anyone else using your website could separately call /sendFormData and change the data contained in the global variables from the result of your search to the result of their search. So you’d get their search results back instead of yours, since their results overwrote your results on the server. You need to handle getting the API results and sending them back to the requester in a single transaction.
(Re: all the local Heroku Config, that’s hard to answer without messing around with your local computer, sorry.)