I need help with Wanderlust challenge - fetching venue photos.
I wrote code that fetch venue photo, but I encountered request error.
Browser said
Failed to load resource: the server responded with a status of 429 ()
I searched 429 status code, and it means too many requests…
I don’t why my requests failed…
Could you help me please!
Below, this is my code.
// Foursquare API Info
const clientId = '#';
const clientSecret = '#';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
const photoUrl = 'https://api.foursquare.com/v2/venues/';
// APIXU Info
const apiKey = '#';
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=14&client_id=${clientId}&client_secret=${clientSecret}&v=20190903`;
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);
const venueId = venues.map(venue => venue.id);
return venues;
}
throw new Error('Request failed!');
} catch (error) {
console.log(error);
}
}
const getForecast = async () => {
try {
const urlToFetch = `${forecastUrl}${apiKey}&q=${$input.val()}&days=4&hour=11`
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const days = jsonResponse.forecast.forecastday;
return days;
}
throw new Error('Request failed!');
} catch (error) {
console.log(error);
}
}
const getVenuePhotos = async (venueId) => {
const photoUrlToFetch = `${photoUrl}${venueId}/photos?limit=1&client_id=${clientId}&client_secret=${clientSecret}&v=20190903`;
try {
const response = await fetch(photoUrlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const photo = jsonResponse.response.photos.items[0];
const photoUrl = `${photo.prefix}100x100${photo.suffix}`;
console.log(photoUrl);
return photoUrl;
}
throw new Error('Request failed!');
} catch (error) {
console.log(error);
}
}
// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
// Add your code here:
let randomIndex = Math.floor(Math.random() * venues.length);
const venue = venues[randomIndex];
const venueId = venue.id;
const venueIcon = venue.categories[0].icon;
const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
const venuePhotoSrc = getVenuePhotos(venueId);
let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc, venuePhotoSrc);
$venue.append(venueContent);
});
$destination.append(`<h2>${venues[0].location.city}</h2>`);
}
const renderForecast = (days) => {
$weatherDivs.forEach(($day, index) => {
// Add your code here:
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)
Are there any mistakes??
