Wanderlust Project

Hi guys I’m having a lot of trouble with the wanderlust project after looking through all of the hints and double checking my code but when I enter a city I keep getting a couple errors;

[Error] Failed to load resource: the server responded with a status of 400 () (explorePortland, Oregon&limit=10&client_id=MMRDZYAV2RUX4JEFFZRC4UPUSSUC2VMQUQMY4WOC4Y5M0BIP&client_secret=ZNH4OX5A1ZT4WMQAPVAKBTEHKWI20USGPCH1W3IZF3JYKGTO&v=20180101, line 0)
AND
[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘venues[index]’)
(anonymous function) (main.js:52)
forEach
renderVenues (main.js:51)
(anonymous function) (main.js:71)
promiseReactionJob

Here is my code below:

// 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'];


const getVenues = async () => {
    const city = $input.val();
    const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180101`;
    try {
        const response = await fetch(urlToFetch);
        if (response.ok) {
            const jsonResponse = await response.json();
            const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
            return venues;
            }
    } catch(error) {
        console.log(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) {
        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 = (day) => {
    const weatherContent = createWeatherHTML(day);
    $weatherDiv.append(weatherContent);
};

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

$submit.click(executeSearch);

please any help is appreciated!

Hi, and welcome to the forum.

Not 100% sure this is what the error is referring to but in your getVenues function you define a const named urlToFetch. The first part of the interpolated string is ${url}. I don’t see this defined in the code you have included, your request won’t actually be getting sent anywhere if you haven’t defined that.

Hi there,

I do have url defined in the global scope it’s just defined next to my api keys so I just cut that part out because I’m most certain that the issue is in one of the async functions.

Ok,

It would seem the URL you are using isn’t quite right then as the 400 status in you error message means you have made a “bad request”.

Double check your url is const url = 'https://api.foursquare.com/v2/venues/explore?near=';

Thank you so much. That was it! I didn’t have that full url for some reason, I really appreciate the help

1 Like