Wanderlust - no weather data

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

Wanderlust project link: [https://www.codecademy.com/courses/intermediate-javascript-requests/projects/wanderlust?course_redirect=introduction-to-javascript ]
(https://www.codecademy.com/courses/intermediate-javascript-requests/projects/wanderlust?course_redirect=introduction-to-javascript )

Hello…again…:frowning:

I need help with getting the forecast/weather to show up. The venues are showing up but not the forecast/weather.

Below is the message I get in the browser console:

Source map error: request failed with status 406
Resource URL: https://www.codecademy.com/webpack/platform-components-CodeBlock.8b0deaf94fc5e3006e43.chunk.js
Source Map URL: platform-components-CodeBlock.8b0deaf94fc5e3006e43.chunk.js.map[Learn More]

Below is my code and below that is the code for the HTML helper file. I didn’t edit the helper file but i posted it just in case:

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

// APIXU Info
const apiKey = ‘37c2c081a0fa444ca90ecabba85ccac2’;
const forecastUrl = ‘https://api.apixu.com/v1/forecast.json?key=’;

// Page Elements
const input = (’#city’);
const submit = (’#button’);
const destination = (’#destination’);
const container = (’.container’);
const venueDivs = [("#venue1"), ("#venue2"), ("#venue3"), $("#venue4")];
const weatherDivs = [("#weather1"), ("#weather2"), ("#weather3"), $("#weather4")];
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=20181224`;

try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
return venues;
}
}
catch(error) {
console.log(error);
}
};

const getForecast = async () => {
const urlToFetch = ${forecastUrl}${apiKey}&q=${$input.val()}&days=4&hour=11;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const days = jsonResponse.forecast.forecastday;
return days;
}
}
catch (error) {
console.log(error);
}
}

// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach((venue, index) => { // Add your code here: const venue = venues[index]; const venueIcon = venue.categories[0].icon; const venueImgSrc = `{venueIcon.prefix}bg_64${venueIcon.suffix}`;

let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);
$venue.append(venueContent);

});
destination.append(`<h2>{venues[0].location.city}`);
}

const renderForecast = (days) => {
$weatherDivs.forEach(($day, index) => {
const currentDay = days[index];
let weatherContent = createWeatherHTML(currentDay);
$day.append(weatherContent);
});
}
const executeSearch = () => {
$venueDivs.forEach(venue => venue.empty());
$weatherDivs.forEach(day => day.empty());
$destination.empty();
$container.css(“visibility”, “visible”);
getVenues().then(venues => renderVenues(venues));
getForecast().then(forecast => renderForecast(forecast));
return false;
}

$submit.click(executeSearch)

Helper file

const createVenueHTML = (name, location, iconSource) => {
return `

{name}</h2> <img class="venueimage" src="{iconSource}"/>

Address:

${location.address}

${location.city}

${location.country}

`; }

const createWeatherHTML = (currentDay) => {
return <h2> High: ${currentDay.day.maxtemp_f}</h2> <h2> Low: ${currentDay.day.mintemp_f}</h2> <img src="https://${currentDay.day.condition.icon}" class="weathericon" /> <h2>${weekDays[(new Date(currentDay.date)).getDay()]}</h2>;
}

2 Likes