Codecademy Forums

Wanderlust

I have a problem in 13th task, of the wanderlust project in javascript.
I am getting error with the urlToFetch
I have recoded the project from scratch still getting same error.
I keep getting the “request failed” message in my browser console.

https://www.codecademy.com/paths/web-development/tracks/webdev-intermediate-javascript/modules/intermediate-javascript-requests/projects/wanderlust

heres my code

// 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=20190609`;
  try{
    const response = await fetch(urlToFetch);
    if(response.ok){
      console.log(response);
      
    }
    throw new Error('Request failed!');
  }
  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 = (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()
  getForecast()
  return false;
}

$submit.click(executeSearch)

You should be using jQuery for all of these values. Because you didn’t, when you send your fetch request, your const city variable is not the value entered on the form.
Instead of const input = ('#city'); it should be const $input = $('#city');
The same goes for all of your page elements.

Also you have syntax errors in your const urlToFetch assignment:

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

When using string interpolation, you reference variables by including them inside of curly braces preceded by a $ like so:
{url} should be ${url}, {city} should be ${city}, etc.

Also when pasting code into your post, please format it as code. There are a few ways to do it. My preference it to type 3 back tics on a line, paste the code on the next line, and type 3 more back ticks on the line below your code:

```
Code goes here
```
Good luck, and happy coding!
2 Likes

check the code i posted. i had preceded the variables with $ but still it doesnt work.
and even the url syntax is corrected.
still getting same error. : (

Couple of issues. I’ve pointed them out in comments in your code above.
This line: throw new Error('Request failed!'); needs to be in an else block or just deleted. You don’t need it since you have a catch block for errors. The way you have it written, it executes every time you call your getVenues function.
Fix those, and you should be able to continue with step 14 of the project. Good luck!

Side note, it would be in your own best interest to modify your original post in a manner such as this. That information belongs to you, and you alone.

I have a question about this syntax:

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');

It’s clear that $input is the element and $(#city) is the id. But I don’t recall learning about this. I don’t even know what or how to search to get more information about this syntax. What “$” means in input and what ('city) does as well. What it does in this and how it finds the elements in the html page.

In the example code you provided, $input is a variable. We use the $ in front of input, so that we and other readers of our code will recognize that it has been assigned a value using jQuery. The code would still work without the $ in front of input, but the $ adds clarity. This takes care of the left side of the statement.

On the right side of the = assignment operator, the $ is used to access jQuery. By using jQuery, we can access DOM elements in a more concise fashion: $('#city');. This will give us the HTML element with id="city". The full statement: const $input = $('#city'); simply assigns the element with id="city" to the variable $input. Later in our code for this project we use this statement:
const city = $input.val(); to assign the value of the element with id="city" to the variable city. If we weren’t using jQuery, the typical way to access HTML elements by their id would be much less concise: const city = document.getElementById('city').value;

Hopefully this helps.

1 Like

The fact that you mentioned jQuery, I now know where to look to find more about it. That’s super helpful.

One follow-up question, technically it would apply to both JQuery and the longform. How does it know which html file to search for the id “city”? I don’t think I see a link on this .js script to the html file.

Does it search within the directory and/or children directories?? (if so, then all id’s should be unique in all html files.)

At the end of the index.html file you’ll find these lines:

  </div>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="public/helpers.js"></script>
    <script src="public/main.js"></script>
  </body>

We have three <script></script> tags. The first one links the jQuery library and the next two link the two JavaScript files in the public folder.