Wanderlust 404 Error of Weather URL in Step 24

Problem

Here is my code snippet of the project Wanderlust:

// OpenWeather Info
const openWeatherKey = '0a56a22fc5de5495de70d6f99b53c269';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

// Add AJAX functions here:
const getForecast = async () => {
  try {
    const urlToFetch = `${weatherUrl}?q=${$input.val()}&APPID=${openWeatherKey}`;
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json(); 
      console.log(jsonResponse);
    }
  } catch(error) {
    console.log(error);
  }
}

Here is my error:

Analize

404 Error means there are somthing wrong my URL.

What I’ve Tried to Solve the Problem

  1. Check the urlToFetch

    I’ve check the format of urlToFetch, the spelling of every variable and the API key which is:

    image

  2. Consult the documentation of OpenWeather

    According to the example:

    I changed the APPID into appid.

    And even directly paste the example code to urlToFetch but in vain.

  3. Search and read all the 7 posts related to “Wanderlust 404” in codecademy forum

    There is a similar question: Wanderlust Error 404 (Part 13.) which is caused by a typo. But I’ve checked my url many times and even directly replace it with an example one.

Demand

So what should I do to solve the 404 error? I would be very gratefull for your answers.

Decoding your search parameter it looks you are searching for this chinese city: 合肥
It seems to be an API limitation in using chinese characters.

I get the following response using the same:

{"cod":"404","message":"city not found"}

Unfortunately I can’t provide a reason why as their documentation says they support chinese simplified and traditional.

Try a city in another location or using roman characters and I’m sure your code will work.

1 Like

Thanks for your answer! You’re right!

I followed your suggestion, directly inputting the city “London” into the searchbar (without clicking submit), and it returned the Promise!

But I found a bug when testing on the live server: after I submit a Chinese character, then whatever I submit, it will still submit the previous Chinese character and return error.

The bug is the reason why my second test in the post has no effect.

I’ll report the bug to codecademy.

Sincerely appreciate for your answer. The problem has struck me for two days, and I feel really good now.

Wish you have a nice day, too~ :slightly_smiling_face:

After I refresh the page, without inputting Chnises character, it works normally again.

1 Like

Great. Yeah sounds like some caching problem on the live server.

Last thing I may suggest is you generate a new API key and delete the old one, as it is posted here publicly. This would ensure someone else doesn’t abuse your account and limits. You can manage your keys here:
https://home.openweathermap.org/api_keys

1 Like

I nearly forgot that! OK, done~

Well, thanks again for your kind and experiential answers, as the decoding of the input and the speculation about the cache problem make me feel incredible.

It seems that I have a long way to go.

But anyway, this communication is a growth for me, and again, wish you have a nice day~ :smiley:

This forum post held a lot of promise for helping resolve my issue but I’m getting the 404 when I input ‘London’. Must be something else!! :joy: