Wanderlust - multiple syntax errors

I have been getting multiple syntax errors on my project, not sure why though :thinking:
ill paste my code down below as well as the error message for you to look at. :face_with_monocle:

// Foursquare API Info
const url = ‘https://api.foursquare.com/v2/venues/explore?near=’;

// OpenWeather Info
const openWeatherKey = ‘5f43fe86eeddeb3e5ce789bc953bc344’;
const weatherUrl = ‘https://api.openweathermap.org/data/2.5/weather’;

// Page Elements
const input = (’#city’);
const submit = (’#button’);
const destination = (’#destination’);
const container = (’.container’);
const venueDivs = [("#venue1"), ("#venue2"), ("#venue3"), $("#venue4")];
const weatherDiv = ("#weather1");
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=20180401’;
try {
const jsonResponse = await response.json();
const response = await fetch(urlToFetch)
if(response.ok) {
const venues = jsonResponse.response.groups[0].items.map(item => item.venue)
return venue
catch(error) {

const getForecast = async () => {
const urlToFetch = weatherUrl + ‘?&q=’ + $input.val() + ‘&APPID=’ + openWeatherKey;
try {
const response = await fetch(urlToFetch)
if(response.ok) {
const jsonResponse = await response.json();
return jsonResponse;
catch(error) {

// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
// Add your code here:
const venue = venues[index];
let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);$venue.append(venueContent);
const venueIcon = venue.categories[0].icon;
const venueImgSrc = venueIcon.prefix + ‘bg_64’ + venueIcon.suffix;


const renderForecast = (day) => {
// Add your code here:
const weatherContent = createWeatherHTML(day); $weatherDiv.append(weatherContent);

const executeSearch = () => {
$venueDivs.forEach(venue => venue.empty());
$container.css(“visibility”, “visible”);
getVenues().then(venues => renderVenues(venues));
getForecast().then(forecast, renderForecast(forecast))
return false;


error message:
main.js:59 Uncaught (in promise) TypeError: Cannot read property ‘0’ of undefined
at main.js:59
at Array.forEach ()
at renderVenues (main.js:57)
at main.js:80
(anonymous) @ main.js:59
renderVenues @ main.js:57
(anonymous) @ main.js:80
Promise.then (async)
executeSearch @ main.js:80
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

and ,

Uncaught ReferenceError: forecast is not defined
at HTMLButtonElement.executeSearch (main.js:81)
at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)
executeSearch @ main.js:81
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

as well as :sweat_smile:

ReferenceError: Cannot access ‘response’ before initialization (main.js:24
at getVenues (main.js:24)
at HTMLButtonElement.executeSearch (main.js:80)
at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

any help would be much appreciated :slightly_smiling_face:

Hi @spurz3412
please format your code, that makes it easier to help:

Many of the errors are quite clearly described. With the help of the console you should be able to get rid of them. For example this:

It means you haven’t defined the variable forecast you use in line 81.
Either it’s not defined or misspelled.

Or this:

It means it cannot find the variable in line 59. Either it’s a variable, which hasn’t been assigned or a parameter, that doesn’t receive the right argument. Then you could add console.log() to multiple places in your code and find out, where it got lost.

Or here:

You probably declared it, but when you use it in line 24, you haven’t assigned a value to it.

When you formatted your code, debugging will be easier.

1 Like