Wanderlust project

[cloud7080820444]

can anyone see why my code renders only 3 venues instead of 4 via the Foursquare renderVenues function?
the getVenues function does return 10 venues from the Foursquare api.

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=20211222';
console.log(urlToFetch);
try{
    const response = await fetch(urlToFetch);
    if(response.ok){
      // console.log(response);
      const jsonResponse = await response.json();
      // console.log(jsonResponse);
      const venues = jsonResponse.response.groups[0].items.map(parameter => parameter.venue);
      console.log(venues);
      return venues; 
    }
    // throw new Error('Request failed!'); //this line is executed each time you invoke getVenues()
  }
  catch(error){
    console.log(error);
  }
}

const getForecast = async() => {
  const urlToFetch = `${weatherUrl}?&q=${$input.val()}&APPID=${openWeatherKey}`;
  try{
   const response = await fetch(urlToFetch);
   if (response.ok){
     const jsonResponse = await response.json();
     console.log(jsonResponse);
     return jsonResponse;
   }
  }
  catch(error){
    console.log(error);
  }

}

// Render functions
const renderVenues = (venues) => {
  for (let index=0; index <$venueDivs.length; index++) {
  // $venueDivs.forEach(($venue, index) => {
    // Add your code here:
    const venue = venues[index];
    const venueIcon = venue.categories[0].icon;
    // console.log(`venue icon ${venueIcon}`);
    const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
    let venueContent =  createVenueHTML(venue.name,venue.location,venueImgSrc);
     $venueDivs[index].append(venueContent);
  // });
  };
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
  // Add your code here:
	let weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
}

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

$submit.click(executeSearch)

thanks in advance,
Gali