Errors with Wanderlust steps 13, 14

Hi, I have been stuck on Wanderlust steps 13, 14 for awhile…most recent error is a cors error. I’ve done some reading and understand a bit about what it is, but I am not sure how to resolve the issue so I can move on. The error:

Access to fetch at ‘https://api.foursquare.com/v2/venues/explore?near=Boston&limit=10&client_id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&client_secret=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&v=20191130’ from origin ‘https://9d332ae1eeb54da9bc31223f1f49592c.cc-propeller.cloud’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

The code:

// Foursquare API Info
const clientId = '';
const clientSecret = '';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = '';
const weatherUrl = "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 $weatherDiv = $("#weather1");
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=20191130`;
  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 = (day) => {
  // Add your code here:
  
	let weatherContent = '';
  $weatherDiv.append(weatherContent);
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDiv.empty();
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues()
  getForecast()
  return false;
}

$submit.click(executeSearch)

Thanks for the help,
Ron

Hi, I haven’t received a response to this issue I posted 10 days ago. I have done something incorrectly? Also, I included keys and I should not have. Can someone please edit the post and remove them?

Thank you,
Ron

Hello, @ronhir

It looks like you may have an issue with your clientId and/or clientSecret. I removed them for you from your post. Double check that they match exactly your credentials received when you created your foursquare account.

HI!!!
Thank you so much for the quick response. Unfortunately (or not) I double checked the id, and created a new client secret today. I also updated the id information for the weather api. None of the updates made any difference. It resulted in this cors error (see below). The only difference is that the first time around it directed me to Foursquare…this time it did not. I did some reading and learned a bit more about cors errors, unfortunately, the error “type” was not specified in dev. tools. Here is a screen shot that I took moments ago…hope it helps.

Screen Shot 2019-12-10 at 6.55.13 PM (2).png

Thank you for removing the keys, live and learn…the hard was sometimes. LOL

Thank you Tod!

Ron

I can’t really read the screenshot, but I ran your code, and found a problem.

If you delete the line mentioned by my comment, you should be able to proceed with the project, I believe. We don’t want to throw an error here. If we get a response, we log it to the console. If we don’t, the error will be caught in the catch statement. You could leave the line in your code, however, if you add an else statement, and put it inside its code block. That way the error will only be thrown if you don’t get a response. As is, it gets thrown every time the function is invoked.

I tried the next few steps with your code after removing the throw new Error('Request failed!'); statement, and everything seems to be working.

Good luck, and keep me posted!

Hi Todd,

I removed that line and tried again. Per dev tools, I have no errors. However, I am still getting this:

Response {type: “cors”, url: “https://api.foursquare.com/v2/venues/explore?near=…5LGWDU3ZRPMATLFOEXQKFVAVKKS0VOS3S4TXMQ&v=20191210”, redirected: false, status: 200, ok: true, …}

How do I get around this cors issue. I did some reading…in this case the cors does not have a type identified, so that didn’t help me figure it out either.

Let me know what you think…

Ron

Hi again,

I cut and pasted the url into another window and this is what I received back:

{

I just ran your code again, and got this in the console:

Response { type: “cors”, url: “https://api.foursquare.com/v2/venues/explore?near=Midland,%20TX&limit=10&client_id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&client_secret=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&v=20191130”, redirected: false, status: 200, ok: true, statusText: “OK”, headers: Headers, body: ReadableStream, bodyUsed: false }

It looks like you are getting the same. This is what is expected at this point. I believe in the next step, you’ll convert the response to json, and start finding the parts you’ll want to extract.

Instead of cutting/pasting the url try right clicking on it, then click ‘Copy Link Location’, and paste it into a browser window. Should look like this:

In my firefox browser I can select JSON, and it then looks like this:

Hi,
I’m not having any luck. I am using a MAC, and I don’t have the option of “Copy Link Location”, are tried everything that looked similar, no luck. Keeps taking me back to the same error, in which the “response” is empty (no data). I’ll try playing with it some more tomorrow and see if I can’t figure it out. I do understand about the conversion to json, but thus far, I can’t get to the data.

R.

The response you are getting:

is not an error. The status: 200 means the request succeeded. This is the expected response. If you are unable to view it in a browser, I would just move on. I added these two lines to your code in the getVenues function inside the if(response.ok) block as per the instructions:

      const jsonResponse = await response.json();
      console.log(jsonResponse);

This is what you’ll get in the console (I blacked out my client_id & client_secret:

Your code is working fine.

Hi Tod,
So you are saying that I’m getting hung up on the fact that I was unable to see it in the browser, correct? I recognized the 200 status (and so was even more confused)….Trying to understand why I feel so stupid! LOL. I’ll review (and add the code into the getVenues function as intended). Am I crazy?, or is this all a bit unclear (not placing blame for sure)?

I’ll work on it again tomorrow.

Many thanks Tod!

R.

1 Like

I suppose, that’s basically it. :wink:
I don’t use Mac, so I can’t say why you are unable to successfully copy/paste the link into a browser, and see the response. Even with the raw data in a browser, you can find the venues. Anyhow, I wouldn’t stay hung up on it for long. You should be good to proceed with the project. :+1:

HI Tod,

I am almost done with this thing (been frustrating), but I have two errors when I was running the final version. Here’s one:

GET https://api.openweathermap.org/data/2.5/weather&q=Boston&APPID=5ea9a3c… 401 (Unauthorized)

getForecast
@
main.js:42
executeSearch
@
main.js:76
dispatch
@
jquery-3.2.1.min.js:3
q.handle
@
jquery-3.2.1.min.js:3

Here’s the second:

ncaught (in promise) TypeError: Cannot read property ‘main’ of undefined
at createWeatherHTML (helpers.js:13 )
at renderForecast (main.js:66 )
at main.js:76

createWeatherHTML
@
helpers.js:13
renderForecast
@
main.js:66
(anonymous)
@
main.js:76
Promise.then (async)
executeSearch
@
main.js:76
dispatch
@
jquery-3.2.1.min.js:3
q.handle
@
jquery-3.2.1.min.js:3

Not sure why I am getting unauthorized on the first one. I decided to go back and repeat the last couple of modules, I feel like this was harder than it should have been. In the meantime, I’d like to get this step finished up. Any help is appreciated.

Thank you,

Ron

Hello, Ron.

There should be a question mark in there between weather and &:
https://api.openweathermap.org/data/2.5/weather?&q=Boston&APPID=your_api_key

That may clear the first error. The second error is due to not receiving a response from openweathermap.org.

Hi Tod,
Thanks very much for the help. I would NEVER have figured out the ? Was missing. Oddly, I confident that I cut and pasted the url from the instructions because it was so long and I didn’t want to make a mistake. Somehow I must have deleted it.

Anyway, both errors cleared with that correction so I am all set. Again, your help was much appreciated. Is there something I should do to “close” the issue?

Best,

Ron

You’re very welcome.

If you feel like I was helpful, you can click the Solution button at the bottom of one of my posts, and that will close the topic.

Happy Coding!

1 Like

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