Wanderlust step 12

[loooocb]

Hello
I’m stuck for several days at step 12 of wanderlust.
I had the following error: TypeError: NetworkError when attempting to fetch resource.
On the forum I saw that I had to add in the options object this property mode: ‘no-cors’.
I made this modification (but without really understanding why…)

Now I don’t have this error anymore, but the following one: Uncaught TypeError: r.contentDocument is null
When I display them on the console, I see response.ok = false
and for response this is what I get:
Response { type: “opaque”, url: “”, redirected: false, status: 0, ok: false, statusText: “”, headers: Headers, body: null, bodyUsed: false }
It seems to me though that I have done exactly what the first 12 steps require!
I’m really stuck, thanks in advance for your help!!!

Here is my code:

// Foursquare API Info
const foursquareKey = ‘XXXXXXXXXXXXXXXXXXXXXXXX’; // my foursquare API key
const url = ‘https://api.foursquare.com/v3/places/search?near=’;

// ajouter sample%20

// OpenWeather Info
const openWeatherKey = ‘XXXXXXXXXXXXXXXXXXXX’; // my OpenWeather API key
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 $placeDivs = [$("#place1"), $("#place2"), $("#place3"), $("#place4")];
const $weatherDiv = $("#weather1");
const weekDays = [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’];

const options = {
method: ‘GET’,
mode: ‘no-cors’, // added … is it right ??
headers: {
Accept: ‘application/json’,
Authorization: foursquareKey
}
};

// Add AJAX functions here:
const getPlaces = async () => {
console.log(‘entrée dans getPlaces’);
const city = $input.val();
const urlToFetch = ${url}${city}&limit=10;
try {
const response = await fetch(urlToFetch,options);
if (response.ok){}
console.log(‘response.ok=’,response.ok);
console.log(‘response =’,response);
}catch (error) {console.log(error);}
};

const getForecast = () => {
};

(…)

[loooocb]

// Foursquare API Info const foursquareKey = 'myAPIkey1'; const url = `https://api.foursquare.com/v3/places/search?near=`; // OpenWeather Info const openWeatherKey = 'myAPIkey2'; 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 $placeDivs = [$("#place1"), $("#place2"), $("#place3"), $("#place4")]; const $weatherDiv = $("#weather1"); const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const options = { method: 'GET', headers: { Accept: 'application/json', Authorization: foursquareKey } }; // Add AJAX functions here: const getPlaces = async () => { console.log('entrée dans getPlaces'); const city = $input.val(); const urlToFetch = `${url}${city}&limit=10`; console.log('URL to Fetch = ',urlToFetch); try { const response = await fetch(urlToFetch,options); if (response.ok){} console.log('response.ok=',response.ok); console.log('response =',response); }catch (error) {console.log(error);} }; const getForecast = () => { }; // Render functions const renderPlaces = (places) => { $placeDivs.forEach(($place, index) => { // Add your code here: const placeContent = ''; $place.append(placeContent); }); $destination.append(`<h2>${places[0].location.locality}</h2>`); }; const renderForecast = (forecast) => { const weatherContent = ''; $weatherDiv.append(weatherContent); }; const executeSearch = () => { $placeDivs.forEach(place => place.empty()); $weatherDiv.empty(); $destination.empty(); $container.css("visibility", "visible"); getPlaces(); getForecast(); return false; } $submit.click(executeSearch);

[loooocb]

[quote=“janbazant1107978602, post:3, topic:661678, full:true”]
You have a comma that doesn’t belong in the console.log in the getPlaces function
That should be

Hello,
Thank you for taking the time to answer me!
unfortunately it does not work for me if I replace the comma by a + in the 2 console.log (... besides it seems to me that the synthaxe since ES6 is with a comma )
Anyway with ',' or '+', my code stops after the fetch request line, it doesn't fit in the 'try', because
response.ok must be false . It goes directly to the 'catch', with the following error message : "TypeError: NetworkError when attempting to fetch resource."...