Wanderlust step 41, get and display venue photos is giving me trouble, I'm not for sure what to do

const getVenues = async () => {
 const city = $input.val();

const urlToFetch = url + city + '&limit=4'/*'&limit=10'*/ + `&client_id=${clientId}&client_secret=${clientSecret}` +'&v=20191008';

  try {
    const response = await fetch(urlToFetch);
   	if (response.ok) {

      console.log('is this working?');

       const jsonResponse = await response.json();

      const venues = jsonResponse.response.groups[0].items.map(item => item.venue);

      console.log(venues);

      const venuesId = venues.map(
        currentVenueItem => currentVenueItem.id
      );

      console.log(`This is the getVenues function expression. Below is the venuesId array: <br/> ${venuesId}`)
      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) {
      console.log(`I'm working.`);
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      console.log('Just above is the OpenWeather jsonResponse')
      return jsonResponse;
    }
  }
  catch (error) {
    console.log(error);
  }
}
/* Step 41 */ 
const getVenuePhotos = async (passMeVenueIds) => {
  
  const photourlToFetch = `${photourl}${passMeVenueIds}/photos?limit=1&client_id=${clientId}&client_secret=${clientSecret}&v=20191008`;

  try {
    const response = await fetch(photourlToFetch);
    if (response.ok) {

      jsonResponse = response.json();
      console.log('Here is the jsonResponse:' + jsonResponse);
      return jsonResponse;
    }
  }
  catch(error) {
    console.log(error);
  }
}

// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {

   let randomIndex = (Math.floor(Math.random() * 3/*was 9*/));

  const venue = venues[randomIndex/*index*/];

  const venueIcon = venue.categories[0].icon;
  const venueImgSrc = venueIcon.prefix + 'bg_64' + venueIcon.suffix;
  
  const venueId = venue.id;
  
  const passVenueId = getVenuePhotos(venueId);

    let venueimage = "venueimage";

    let venueContent = 
        
`<h2>${venue.name}</h2>
<img class="venueimage" src="${venueImgSrc}"/>
<h3>Address:</h3>
<p>${venue.location.address}</p>
<p>${venue.location.city}</p>
<p>${venue.location.state}</p>
<p>${venue.location.country}</p>
<p>${venue.location.postalCode}</p>
<p>Category Id: ${venue.categories[0].id}</p>
<p>Venue Id: ${venue.id}</p>`;

    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}
// step 33: 
const day = weekDays[(new Date()).getDay()];
console.log('console.log(day): ' + day);

const renderForecast = (day) => {
  const kToF = k => ((k - 273.15) * 9 / 5 + 32).toFixed(0);
  
  
    console.log(kToF(day.main.temp));

  let weatherContent = 

`<h2>Today is: ${weekDays[new Date().getDay()]}</h2>
<h2>Temperature: ${day.main.temp}Kelvin, ${kToF(day.main.temp)/*((day.main.temp - 273.15) * 9 / 5 + 32 ).toFixed(0)*/}F</h2>
<h2>Max Temperature: ${day.main.temp_max}Kelvin, ${kToF(day.main.temp_max)}F</h2>
<h2>Min Temperature: ${day.main.temp_min}Kelvin, ${kToF(day.main.temp_min)}F</h2>
<h2>Condition: ${day.weather[0].description}</h2>
<h2>Coordinates: <br/><br/>${day.coord.lon} longitude, ${day.coord.lat} latitude.</h2>
<h2>Wind speed: ${day.wind.speed}</h2>
<img src="https://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png"" />
`;
  $weatherDiv.append(weatherContent);
}

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

 console.log(weekDays[new Date().getDay()]);
	// This works.

$submit.click(executeSearch)

Hi, I’m struggling on the same thing, have you fixed it?

I’m trying to get the bestPhoto for each venue from the foursquare API.
I’m using the .id from the first response to send a new request to Venues

Here is the code in main.js:

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

// OpenWeather Info
const openWeatherKey = '13ede3e4bac2b5f97bb0f080b5a8973e';
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")];
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=20191118';
  try {
  const response = await fetch(urlToFetch);
  if (response.ok) {
    const jsonResponse = await response.json();
    const venuesList = jsonResponse.response.groups[0].items.map(item => item.venue);
    let venues = [];
    for(i=0; i<4; i++){
      const randomNum = Math.floor(Math.random()*venuesList.length);
      venues = venues.concat(venuesList.splice(randomNum, 1));
    };
    return venues;
  }
  }catch(error){console.log(error)}
}

const getVenuePicSrc = async(id) =>{
  const picUrlToFetch = 'https://api.foursquare.com/v2/venues/'+ id + '?' + 'client_id=' + clientId + '&client_secret=' + clientSecret + '&v=20191118';
  try{
    const response = await fetch(picUrlToFetch);
    if(response.ok){
      const jsonResponse = await response.json();
      const venuePicUrl = jsonResponse.prefix + '300x170' + jsonResponse.suffix;
      return venuePicUrl;
    }
  }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();
    return jsonResponse;
    }
  }
  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;
    const venueId = venue.id;
    const venuePicSrc = getVenuePicSrc(venueId);
    const venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc, venuePicSrc);
$venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

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

$submit.click(executeSearch)

and the code in helpers.js

const createVenueHTML = (name, location, iconSource, PicSrc) => {
  return `<h2>${name}</h2>
  <img class="venueimage" src="${iconSource}"/>
  <h3>Address:</h3>
  <p>${location.address}</p>
  <p>${location.city}</p>
  <p>${location.country}</p>
<img src="${PicSrc}">`;
}

const createWeatherHTML = (currentDay) => {
  console.log(currentDay)
  return `<h2>${weekDays[(new Date()).getDay()]}</h2>
		<h2>Temperature: ${kelvinToFahrenheit(currentDay.main.temp)}&deg;F</h2>
		<h2>Condition: ${currentDay.weather[0].description}</h2>
    <h2>Humidity: ${currentDay.main.humidity}%</h2>
  	<img src="https://openweathermap.org/img/wn/${currentDay.weather[0].icon}@2x.png">`;
}

const kelvinToFahrenheit = k => ((k - 273.15) * 9 / 5 + 32).toFixed(0);

Thanks a lot for your help.