Wanderlust: step 13 & 14. Browser's JavaScript console

Hi. I really need some help. I’m stuck at step 13 of Wanderlust project.

So on step 13, it says “Make sure that you have your own browser’s JavaScript console open so that you can see the response that is logged to the console.”
I figured to open the console with ctrl + shift + j. But I have no idea what to do with that.
I installed JSON view, and opened JSBeautifier, but again, I have no idea what I need to do with them.

When I enter a city in the Wanderlust page, I don’t see the response includes the URL I requested. To be honest, I don’t even know where to find that URL I requested…

I copied and pasted to VS code, hoping I can see something on that console, but it returned an error saying “cannot find module”

Please help me out here.

Hi there.

So, by that stage in the project, you should have an asynchronous function getVenues() defined.

The previous steps ask you to:

  1. Create a const called city,
  2. Create a const called urlToFetch, and construct the URI to the API endpoint.
  3. Add an empty try...catch structure.
  4. Use console.log() to output any errors from the catch block.
  5. Add a fetch() to the try block, to fetch the result from the API endpoint and store it in const response.
  6. Create a conditional statement to check that the response is ok.
  7. …and then, where you got stuck, log response to the console.

As a result, your code should look something like this - though, please note, I have adjusted this so I’m not handing out a verbatim solution:

const getVenues = async () => {
  const city = $input.val(); // step 7
  const urlToFetch = "your API URL goes here..."; // step 8
  try { // step 9, part 1 (try-catch)
    const response = await fetch(urlToFetch); // step 11
    if (condition - is the response ok?) { // step 12
      console.log(response); // step 13!
        ... more code goes here as you progress ...
  } catch (error) { // step 9, part 2 (try-catch)
    console.log(error); // step 10

Without seeing your code, it’s difficult to be sure where your error is (if you have indeed made one). At that point in the project, if the response from the API endpoint is not OK then I don’t think you would get any output to the console.

You could easily add more calls to console.log() around your code, either to see whether you reach them (and so track the progress of your program during execution) or to see what values are assigned to variables at specific points in the execution path. This is fairly basic debugging. :slight_smile:

If you’d care to post your code - preferably correctly formatted - then we can take a look at it. :slight_smile:

1 Like

Thank you for the reply.
Here’s my code.

const getVenues = async() => {

  const city = $input.val();

  const urlToFetch = url + city + '&limit=10&client_id=' + clientId + '&cliet_secret=' + clientSecret + '&v=20200804';


    const response = await fetch(urlToFetch);








I still can’t figure out how I can use the browser’s JavaScript console. So I have no idea where to find what I logged on the console.
And also I don’t know where to find the response includes the URL I requested…

Thanks for posting the code.

You have a typo in your urlToFetch, so your request might not be succeeding and as a result nothing is being logged to the console. :slight_smile:

1 Like

Thank you. I fixed my typo in urlToFetch

const urlToFetch = url + city + '&limit=10&client_id=' + clientId + '&client_secret=' + clientSecret + '&v=20180401';

But still, I get the error message “Error: Cannot find module” on VScode.
And could you teach me how can I use the browser’s JavaScript console? If it’s easier to check, I’d like to use it instead of the VS code.

Running the project locally would be dependent on your computer having Node installed, and presumably any modules that the project relies on. One imagines that the error is telling you which module it cannot find?

It’s the console provided as part of the Dev Tools (F12), or CTRL+SHIFT+J in a Chromium browser as you’ve previously mentioned.

As I previously mentioned, the code if constructed in line with the instructions will more than likely provide no output to the console if the fetch() request fails in some cases. What I mean by this is that, if the fetch() doesn’t encounter a network error or some form of “proper” exception but returns an HTTP response other than 200 OK you won’t get an error thrown by your catch block. fetch() returning something like 404 Not Found is a valid response, not an exception, but you’re not testing for anything other than 200 OK.

Adding extra calls to console.log() throughout your program would help you follow the execution path and see both how far your program is progressing and what state certain variables are in along the way. (This will also produce more output on the console, so you can get used to working with it.)

I have installed node on my computer. Here’s the whole error message.

Error: Cannot find module 'C:\Users\(myname)\Desktop\New folder (2)\main.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  requireStack: []

For the browser’s console, I think I need some time to figure out what you mean and try to understand… Let me ask about it again later.

Not sure if you’ve managed to solve it but just a note, you shouldn’t need to manually ‘run’ the code locally. The code will be run when the user interacts with the webpage (index.html)

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