Wanderlust Error 404 (Part 13.)

Wanderlust

Hey all. I’m looking for some help with Wanderlust (Apologies in advance for any mistakes in the post, I’m new to the forum.).

Specifically, an error that I’m encountering.

Console feedback suggests a 404 error on line 27, which is my fetch() request, linking back to my ‘urlToFetch’ variable ~

I’m assuming it has something to do with the URL link being incorrect. I’m just unsure which part exactly is incorrect. So I pasted the URL that the console was logging into a new tab and was provided with the information I was expecting, formatted by the ‘JSON view’ extension.

I couldn’t find any syntax or reference errors and checked VSCode for reference. Pasting the error into Google just produced the result I was expecting (That 404 usually refers to a missing link, etc).

I reposted my API’s any time I tried reloading the page, also.

Here’s my code for reference…

const getVenues = async () => {
  const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210524`;
  console.log(urlToFetch)
  try {
    const response = await fetch("urlToFetch", response => {
      if (response.ok) {
        console.log(response)
      }
    })
  } catch(error) {
    console.log(error);
  }
}; 

Please let me know if you need more information.

Thank you.

Hey dplumbonline, how are you doing?

Can you share what’s the value stored in the variable url? Also, can you share what is the output of console.log(urlToFetch)?

The url variable should be exactly equal to this:
https://api.foursquare.com/v2/venues/explore?near=

if it’s not, that could be part of the problem.

Another thing I notice is your syntax for the fetch request. You’re passing a second parameter to it.
You can do that, but it must follow the correct syntax:

I think that could be the cause of your issue, because basically your second parameter is a custom property that is being associated to your request. It is not understood and gives you an error.

you should correct this:

const response = await fetch("urlToFetch", response => {

with this:

const response = await fetch(urlToFetch);

Then of course save the response as .json() and do the rest that is required in order to return the venues.

Try this and let me know :slight_smile:

How are you? I’m great (:

Thank you for the reply.

…and thanks for the syntax information! There were quite a few different methods pertaining to fetch requests. I believe I got that fixed up!

const response = await fetch("urlToFetch");
    if (response.ok) {
      let jsonResponse = await response.json();
      console.log(jsonResponse)
    }

Regarding the URL. It mirrors the one you linked here.

const url = 'https://api.foursquare.com/v2/venues/explore?near=';
https://api.foursquare.com/v2/venues/explore?near=Perth&limit=10&client_id=theClientId&client_secret=theClientSecret&v=20210524

I appreciate the assistance!

I’ll continue to work on solutions ;p

Have a good night.

1 Like

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