Wanderlust - Fetching venue photos challnge

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??

Hey @bear27_yuta

As you’re trying to pull images from FourSquare, their API documentation may be helpful.

If you are over the daily call quota limit, the Foursquare API will return a 429 error until the time of reset.

The venue/photos endpoint is a “Premium” endpoint on FourSquare’s API, so if you’re using the basic “Sandbox” tier then you only get 50 calls to that API per day and these reset at midnight UTC. (If you have verified your account and provided a credit card number, you’re on the “Free” tier and get 500 calls to that endpoint per day.)

You can check whether you’re being rate limited by checking the headers X-RateLimit-Remaining, which should be non-zero if you can still make requests, and X-RateLimit-Limit to see how many requests you can make per day. These headers are in the response from the API endpoint.

:slight_smile:

3 Likes