I am on the step 33rd of the ‘wanderlust’ project. It says at the end, information of the venue entered in the search field will be displayed after completing the step, but it didn’t. I have copied the error shown in the Google Deveoper’s Console below -
Link to the project - https://www.codecademy.com/paths/web-development/tracks/webdev-intermediate-javascript/modules/intermediate-javascript-requests/projects/wanderlust
Uncaught (in promise) TypeError: Cannot read property ‘0’ of undefined
at main.js:55
at Array.forEach ()
at renderVenues (main.js:54)
at main.js:78
But I can’t understand what’s wrong with the code. My JavaScript file is given below -
Main.js -
// Foursquare API Info
const clientId = '';
const clientSecret = '';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
// APIXU Info
const apiKey = '';
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key=';
// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// Add AJAX functions here:
const getVenues = async () => {
const city = $input.val();
const urlToFetch = url + city + '&limit=10&client_id=' + clientId + '&client_secret=' + clientSecret + '&v=20190814';
try {
const response = await fetch(urlToFetch);
if (response.ok) {
console.log(response);
const jsonResponse = await response.json();
console.log(jsonResponse);
}
} catch(error) {
console.log(error);
}
}
const getForecast = async () => {
const urlToFetch = forecastUrl + apiKey + '&q=' + $input.val() + '&days=4&hour=11'
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
console.log(jsonResponse);
const days = jsonResponse.forecast.forecastday;
return days;
}
} catch(error) {
console.log(error);
}
}
// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
const venue = venues[index];
const venueIcon = venue.categories[0].icon;
const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);
$venue.append(venueContent);
});
$destination.append(`<h2>${venues[0].location.city}</h2>`);
}
const renderForecast = (days) => {
$weatherDivs.forEach(($day, index) => {
// Add your code here:
let weatherContent = '';
$day.append(weatherContent);
});
}
const executeSearch = () => {
$venueDivs.forEach(venue => venue.empty());
$weatherDivs.forEach(day => day.empty());
$destination.empty();
$container.css("visibility", "visible");
getVenues().then(venues => renderVenues(venues));
getForecast()
return false;
}
$submit.click(executeSearch)
Please help !
