Wanderlust step 13

The steps’ instructions are the following"
Log the response to the console. In the browser window with the Wanderlust page, enter a city in the search field and submit. Make sure that you have your own browser’s JavaScript console open so that you can see the response that is logged to the console.

I have tried this several times but I got no response whatsoever in my browser’s JavaScript console.

Can someone point out what I am doing wrong, please?
Following is the relevant code:

const getVenues = async () => {

  const city=$input.val() // $input.value is what the user inputs

  const urlToFetch=`${url}${city}&limit=10&client_id=${clientID}&client_secret=${clientSecret}&v=20200529`;

  try{

    const response=await fetch(urlToFetch{

        if(response.ok){

          console.log(response);

         

        }

    });

  } catch(error){

    console.log(error);

  }

}

Check the hint for step 11.

one thing that I noticed is that your variable name in clientId on your version is wrong. It should be clientId, not clientID.

Thank you for your prompt reply.
I have corrected the error you pointed out. However, i am still not getting any response in my browser’s JavaScript console. My code now looks like this (clientId etc have been removed):

const clientId = '';

const clientSecret = ';

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

// OpenWeather Info

const openWeatherKey = '';

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() // $input.value is what the user inputs

  const urlToFetch=`${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200530`;

  try{

      const response=await fetch(urlToFetch);

      if(response.ok){

        console.log(response);

      }

  } catch(error){

      console.log(error)

  }

}

I’m assuming that isn’t everything from main.js, and that the boilerplate from the bottom of main.js (specifically everything after the comment // render functions) remains intact?

Your code correctly returns a response to the console for me, using my API keys, which is why I’m wondering if you’re not getting anything because the code which assigns the onclick handler to the submit button is missing…

The following is the remaining part of the program.

const getForecast = () => {

}

// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
// Add your code here:

let venueContent = ‘’;
$venue.append(venueContent);
});
destination.append(`<h2>{venues[0].location.city}`);
}

const renderForecast = (day) => {
// Add your code here:

let weatherContent = ‘’;
$weatherDiv.append(weatherContent);
}

const executeSearch = () => {
$venueDivs.forEach(venue => venue.empty());
$weatherDiv.empty();
$destination.empty();
$container.css(“visibility”, “visible”);
getVenues()
getForecast()
return false;
}

$submit.click(executeSearch)

Can you please post the entire content of main.js (remove the API keys if you like), so that I can copy/paste exactly what you’re running to see if I get the same behaviour.

As I said previously, if I replace my getVenues() function with yours I get a response on the console. I don’t know why you aren’t, but by cobbling bits of your program into mine I’m not looking at an accurate reflection of your work to check it. :slight_smile:

Thank you for your help and patience. Here is the entire program:

// Foursquare API Info
const clientId = '';
const clientSecret = '';
// Foursquare API Info
const clientId = '';
const clientSecret = '';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = '';
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() // $input.value is what the user inputs
const urlToFetch=`${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200530`;
try{
const response=await fetch(urlToFetch);
if(response.ok){
console.log(response);
}

} catch(error){
console.log(error)
}
}

const getForecast = () => {

}

// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
// Add your code here:

let venueContent = '';
$venue.append(venueContent);
});
$destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
// Add your code here:

let weatherContent = '';
$weatherDiv.append(weatherContent);
}

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

$submit.click(executeSearch)

I’ve formatted the code (and removed your API secrets), so that it’s easier to read.

The immediate thing which jumps out, though, is that you are defining const clientId and const clientSecret twice?

That’ll result in a SyntaxError…

Did it work for you when you removed the duplication? For me it did not.

Yes, if I ignore the duplicated api secrets at the start, the rest of the code works and I get a response on the console. :slight_smile:

I also get a response using your code with my keys. Do you not see anything in the console?

Is the attached the type of response I should be getting, please?

1 Like

Looks good. Now, if I remember right, the next step (14) should be asking you to copy the url, and paste it into another browser window, so you can read the json response.

1 Like