Wanderlust currentDay.day is not defined

I finished all the steps and i get error in console when i submit my city.

Uncaught (in promise) TypeError: currentDay.day is undefined
createWeatherHTML f345803d936b4b868da9b8d431fe7e8e.cc-propeller.cloud/public/helpers.js:11
renderForecast f345803d936b4b868da9b8d431fe7e8e.cc-propeller.cloud/public/main.js:69
renderForecast f345803d936b4b868da9b8d431fe7e8e.cc-propeller.cloud/public/main.js:65
executeSearch 345803d936b4b868da9b8d431fe7e8e.cc-propeller.cloud/public/main.js:80

My code for that part is this one:

const renderForecast = (day) => {

$weatherDivs.forEach(($day, index) => {

// Add your code here:



let weatherContent = createWeatherHTML(day);

$weatherDiv.append(weatherContent);

});

}

const executeSearch = () => {

$venueDivs.forEach(venue => venue.empty());

$weatherDivs.forEach(day => day.empty());

$destination.empty();

$container.css(“visibility”, “visible”);

getVenues().then(venues => renderVenues(venues));

getForecast().then(forecast => renderForecast(forecast));

return false;

}

$submit.click(executeSearch)

Hey there kivu96
I could help you. But, I need to see the whole code to understand why the error is telling you that currentDay.day is undefined.
Also, format your code in the right way when you post it.

<code>
// Foursquare API Info

const clientId = 'WHDZ040IKKH0V1PFRLFSHGRQGJU4A32BOD32KIRXGLWWLDZY';

const clientSecret = 'S5ZE01QH4GOKY2JBTQIUF2LFFMY2TYASY5PU3X24YJR0GEZ5';

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

// APIXU Info

const apiKey = '448667967bcb2b3252ffb40f2e0aff0f';

const forecastUrl = '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 $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=20210508`;

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

          console.log(venues);

          return venues;

          }

    } catch (error) {

        console.log(error);

    }

}

const getForecast = async () => {

  const urlToFetch = `${forecastUrl}?&q=${$input.val()}&APPID=${apiKey}`

  try {

    const response = await fetch(urlToFetch);

    if (response.ok) {

      const jsonResponse = await response.json();

      console.log(jsonResponse);

      return jsonResponse;

    }

  } catch (error) {

    console.log(error);

  }

}

// Render functions

const renderVenues = (venues) => {

  $venueDivs.forEach(($venue, index) => {

    // Add your code here:

    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) => {

  $weatherDivs.forEach(($day, index) => {

    // Add your code here:

    

    let weatherContent = createWeatherHTML(day);

    $weatherDiv.append(weatherContent);

  });

}

const executeSearch = () => {

  $venueDivs.forEach(venue => venue.empty());

  $weatherDivs.forEach(day => day.empty());

  $destination.empty();

  $container.css("visibility", "visible");

  getVenues().then(venues => renderVenues(venues));

  getForecast().then(forecast => renderForecast(forecast));

  return false;

}

$submit.click(executeSearch)
</code>

I have no idea how to format properly, im new here.
createVenueHTML and createWeatherHTML functions are all default, came with the task, i didnt change anything there.

Ye no probs, you did ok in this post. The third post you can actually delete as it is a clone.
Also, Edit out your API keys if you still can. There was no need to share them in full. Or maybe you redacted them already, I hope. Well anyway, bottom up:

  1. First thing I noticed is that our executeSearch() functions are slightly different. I don’t manipulate $weatherDivs.forEach(day => day.empty()); like you do. Can you remind me why you use that?
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;
};
  1. Second thing is about renderVenues(), this is mine:
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    const venue = venues[index];
    const venueIcon = Object.values(venue.categories[0].icon).join("bg_64");
    console.log(venueIcon);
    let venueContent = createVenueHTML(venue.name, venue.location, venueIcon);
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
};

I remember that getting the icon was tricky, did you check with some console.log that you’re getting the correct url for the venueIcon? I see that you declare it, but you’re not using it anywhere, as you’re passing const venueImgSrc =`${venueIcon.prefix}bg_64${venueIcon.suffix}` . Does this declaration work? Test it with a console.log.

  1. Another thing strange I see with getForecast(), can you clarify if using the template literal actually works in this case? I don’t use this, so it may be interesting to know. Also, I notice an error in the conjunction between your url domain and the first query string, you added an ampersand, does it work that way? I used ?q= not ?&q=
    const urlToFetch = `${forecastUrl}?&q=${$input.val()}&APPID=${apiKey}`

I think for the moment is enough, let me know about this and then I may continue checking your code. :slight_smile:

  1. I didn't touch anything there besides adding getVenues and getForecast, everything was already there when I started the project.
  2. First thing I noticed is that our executeSearch() functions are slightly different. I don’t manipulate $weatherDivs.forEach(day => day.empty()); like you do. Can you remind me why you use that?

  3. Everything is working great in this function and icons are showing aswell.
  4. Second thing is about renderVenues() , this is mine:

  5. I changed the ampersand mistake, don't know if anything changed because I am still receiving the same error.
  6. Another thing strange I see with getForecast() , can you clarify if using the template literal actually works in this case? I don’t use this, so it may be interesting to know. Also, I notice an error in the conjunction between your url domain and the first query string, you added an ampersand, does it work that way? I used ?q= not ?&q=
    const urlToFetch = {forecastUrl}?&q={input.val()}&APPID={apiKey}

Hey Kivu,
alright.

Let’s continue from where we left.

  1. In your renderForecast() I see that you wrapped the code inside a forEach. Why’s that?
const renderForecast = (day) => {
  $weatherDivs.forEach(($day, index) => {
    // Add your code here:
    let weatherContent = createWeatherHTML(day);
    $weatherDiv.append(weatherContent);
  });
}

The ugly jQuery variable $weatherDiv (yes, I hate jQuery) corresponds to the html element with id #weather1. By definition of id html attributes it must refer to one single element. So this should already tell us that using a forEach is wrong.

Try to remove that forEach, you should have a getForecast() like this:

// Render forecast from getForecast()
const renderForecast = (day) => {
  let weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
};
  1. In executeSearch() remove that weird line I pointed out in my previous post and changed it back to this line:
    $weatherDiv.empty();

Please let me know how this goes :slight_smile:

  1. I didn't write that code, it came with project, I only added a function to weatherContent
  2. In your renderForecast() I see that you wrapped the code inside a forEach . Why’s that?

  3. I changed it. Now my app isn't working. No divs show up in browser for those data from functions to fill it up. And now it shows error Uncaught ReferenceError: $weatherDiv is not defined
  4. In executeSearch() remove that weird line I pointed out in my previous post and changed it back to this line:
    $weatherDiv.empty();

  1. I didn’t write that code, it came with project, I only added a function to weatherContent

This is very strange as when I load the exercise I don’t see that code.

Uncaught ReferenceError: $weatherDiv is not defined

Yes, sorry that’s a typo on my part. It’s missing an “s”
$weatherDivs.empty();

Also, I see that your variable $weatherDivs has been binded to an array of 4 different id:
[$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
Also this came with the project? Can you share your index.html file? Let’s check if you actually have all those id in your html if you don’t mind.

Yes, sorry that’s a typo on my part. It’s missing an “s”
$weatherDivs.empty();

I added the s and now it's showing Uncaught TypeError: $weatherDivs.empty is not a function

Also, I see that your variable $weatherDivs has been binded to an array of 4 different id:
[$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
Also this came with the project? Can you share your index.html file? Let’s check if you actually have all those id in your html if you don’t mind.

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="utf-8">

&lt;title>Wanderlust</title>

&lt;link rel="stylesheet" type="text/css" href="public/reset.css" />

<link rel=“stylesheet” type=“text/css” href=“public/style.css” />

&lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<link href=“https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans” rel=“stylesheet”>

</head>

<body>

&lt;header>

  &lt;img class="logo" src="https://content.codecademy.com/courses/intermediate-javascript-requests/wanderlust/logo.svg" alt="logo" />

&lt;/header>

&lt;main>

  &lt;h1>Where do you want to land?</h1>

  &lt;form autocomplete="off">

   &lt;input type="text" id="city">

   &lt;button id="button" type="submit">Submit</button>

  &lt;/form>

&lt;/main>

&lt;div class="container">

&lt;div id="destination">

&lt;/div>

&lt;div class="sectiontitle">

  &lt;h2>WEATHER</h2>

&lt;/div>

&lt;section id="weather">

    &lt;div class="weather" id="weather1">

    &lt;/div>

    &lt;div class="weather" id="weather2">

    &lt;/div>

    &lt;div class="weather" id="weather3">

    &lt;/div>

    &lt;div class="weather" id="weather4">

    &lt;/div>

&lt;/section>

&lt;div class="sectiontitle">

  &lt;h2>TOP ATTRACTIONS</h2>

&lt;/div>

&lt;section id="venues">

  &lt;div class="venue" id="venue1">

  &lt;/div>

  &lt;div class="venue" id="venue2">

  &lt;/div>

  &lt;div class="venue" id="venue3">

 &lt;/div>

&lt;/section>

&lt;footer>

&lt;/footer>

</div>

&lt;script

src=“https://code.jquery.com/jquery-3.2.1.min.js

integrity=“sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=”

crossorigin=“anonymous”></script>

&lt;script src="public/helpers.js">&lt;/script>

&lt;script src="public/main.js">&lt;/script>

</body>

</html>

Everything is there.

I have no idea how to format this, once it is showing &lt correctly once not.
I wrapped it all in code, is that the correct way ?

type three backticks ``` before the entire code block and again three backticks ``` after the code block.
If you don’t know how to insert backticks from your keyboard, you can copy the ones in this message or select all your code block and once selected click on the </> symbol in the top bar of the message editor, in-between the symbol for quote and upload.

I added the s and now it’s showing Uncaught TypeError: $weatherDivs.empty is not a function

This error is due to the fact that the variable $weatherDivs that you got is an array of values instead of being one single value. The correct variable should be:
const $weatherDiv = $("#weather1");

As you can see it’s $weatherDiv though, instead of $weatherDivs, which is what you somehow got, it’s singular, without the final “s”, because in the Wanderlust exercise on codeacademy the html has only one single <div> html element with id="weather1" that will be used to host the weather forecast of the city queried.

So once you format the html code correctly we can check how many divs with id weather there are. If there’s only one, as I think there should be, then your variable $weatherDivs declared in the top of the file as:
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
must be changed to:
const $weatherDiv = $("#weather1");

1 Like

Thank you for your help.
When I read this I reset the code entirely and now everything was different, weatherDiv was a single value, not an array, and my execute function was different, with that weatherDiv.empty().
And now I did whole project from beginning to end and everything is working just fine.

1 Like

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