JavaScript Wanderlust Project

Hi There, I am trying to attempt the JavaScript Request WanderLust Module however whenever I try to run the URL request this is what I get:

{

  • meta: {

    • code: 400,

    • errorType: “failed_geocode”,

    • errorDetail: “Couldn’t geocode param near: …YIS0MOJKCYXVTNOXD5M1AFVMQMBY3NLQBTZ4UI”,

    • requestId: “607c59647f6c785fd802fced”},

  • notifications: [

    • {
      • type: “notificationTray”,

      • item: {

        • unreadCount: 0}}],
  • response: { }
    }

I tried debugging my code ut I could not wrap my head around getting it to work.
Attached below is my code. Any help will be very much appreciated. Thanks!
//Code

// Foursquare API Info

const clientId = “3NEH4GWQCREJNCIZARRBQINY3ESBCLTDB2VF3UWB0AJ1NF12”;

const clientSecret = “3CJRN4C1WYYIS0MOJKCYXVTNOXD5M1AFVMQMBY3NLQBTZ4UI”;

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

// OpenWeather Info

const openWeatherKey = ‘4bd8e9cd4bda1f13fc676d7358f51e76’;

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=20210418;

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}`);

}

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)

Hi. Do you mind posting the code using the formatting option in the forum editor. It has a </> symbol. Paste code between 2 sets of three backticks and it will display properly and be much easier to troubleshoot. You may have an issue with string interpolation but it’s hard to tell without using the formatting option. Also, keep in mind that when using fetch you will need to convert the response to json (if the response is in json which is very common). This line will convert it:

    const jsonResponse = await response.json();
// Foursquare API Info
const clientId = "3NEH4GWQCREJNCIZARRBQINY3ESBCLTDB2VF3UWB0AJ1NF12";
const clientSecret = "3CJRN4C1WYYIS0MOJKCYXVTNOXD5M1AFVMQMBY3NLQBTZ4UI";
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = '4bd8e9cd4bda1f13fc676d7358f51e76';
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=20210418`;
  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)

Hey Mike, thanks for the reply, and here is my code. I get what you mean by converting the response to JSON however that is in the next step of the project.

{
meta: {
code: 400,
errorType: "failed_geocode",
errorDetail: "Couldn't geocode param near: …YIS0MOJKCYXVTNOXD5M1AFVMQMBY3NLQBTZ4UI",
requestId: "607d7ffd44533a65cda82cdf"
},
notifications: [
{
type: "notificationTray",
item: {
unreadCount: 0
}
}
],
response: { }
}

According to the project, the goal is to get a JSON object with a list of Attraction sites depending on the input entered by the user once I send a request. However, whenever I try to load the response URL, I get the error message above .instead.

I tested your const values and most of your getVenues function and they seem to work. Are you entering a city in the search-box (Where do you want to land?) of the webpage when running the search? The error hints that there is an issue with the near-parameter of the api-call… As a trouble-shooting step, if that does not fix the problem, you could try to temporarily comment out the line:

const city = $input.val();

and replace it with

const city = 'London';

Hi Mike, I took a little break from the JS course because I just couldn’t get it to run how it Is supposed to. I am trying again as I type this message yet it is still not working. I have idea what the problem could be.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.