Wanderlust challenge

Get Help JavaScript
#1

So I’m through the Wanderlust project and on to the challenges. I’ve found the code to render more than 4 venues and randomize them, but I’m running into the issue that some of them are duplicates. Does anyone have any idea how to fix this?

Here’s my code from main.js:


// Foursquare API Info
const clientId = 'omitted';
const clientSecret = 'omitted';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = 'omitted';
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 $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4"), $("#venue5"), $("#venue6"), $("#venue7")];
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=20210126`
  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);
      console.log(venues);
      return venues;
    }
  } 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) => {
  $venueDivs.forEach(($venue, index) => {
    let randomIndex = Math.floor(Math.random() * venues.length)
    const venue = venues[randomIndex];
    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}</h2>`);
}

const renderForecast = (day) => {
	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 => renderVenues(venues));
  getForecast()
    .then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)
#2

I’m working on this now, but I can’t even figure out why/where it’s limited to four to begin with? Why aren’t we getting all 10 venues? The video points to the foreach loop, but shouldn’t that be looping through all 10? I don’t see anything to break out of the loop.

Later: Okay, disregard above question, I finally figured it out - but I’ll leave it and answer both my and pyninja33596 for anyone else looking for help on this.

First: the foreach loop isn’t looping through the venues. It’s looping through the boxes available to put venues in.

Next: Before the foreach loop, create an array usedVenues. Then inside the foreach use while to keep resetting your randomIndex until it’s not included in usedVenues. Then add it to usedVenues and use it as your venues index.