Wanderlust Project Help - JavaScript Requests


#1

Hello,

I’m having an issue getting started with the ‘Wanderlust’ project in the ‘Requests’ section of ‘Introduction To JavaScript’.

https://www.codecademy.com/courses/intermediate-javascript-requests/projects/wanderlust?course_redirect=introduction-to-javascript

I’ve completed steps 1-19, however, I’m not getting any results in the console when I test my changes as instructed to in the steps.

My current code is as follows:

// Foursquare API Info
const clientId = 'G3KTTXPMD4TJ5XKFSOJJH5BVK0YBD2TGE5YK4DEYPIPFRMME';
const clientSecret = 'NS00JCE2JWTCNFFZK0Q4Y3JC010G2XKEUKV2NAKRJEMYOSOS';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
const imgPrefix = 'https://igx.4sqi.net/img/general/150x200';

// APIXU Info
const apiKey = 'edfdd2214cba49b3ac7100022172911';
const forecastUrl = 'http://api.apixu.com/v1/search.json?key=edfdd2214cba49b3ac7100022172911&q=lond';

// 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 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

// AJAX functions
async function getVenues() {
  const city = $input.val();
  const urlToFetch = url + city + '&venuePhotos=1&limit=10&client_id=' + clientId + '&client_secret=' + clientSecret + '&v=20170305';
  try {
    let response = await fetch(urlToFetch);
    if (response.ok) {
      let jsonResponse = await response.json();
      console.log(jsonResponse);
      let venues = jsonResponse.response.groups[0].items.map(city => city.venue);;
      console.log(venues);
      return venues;
    }
    throw new Error('Request failed!');
  } catch (error) {
    console.log(error);
  }
};

// Render functions
function renderVenues(venues) {
  $venueDivs.forEach(($venue, index) => {
    let venueContent =
      '<h2>' + venues[index].name + '</h2>' +
      '<img class="venueimage" src="' + imgPrefix +
      '<img suffix>' + '"/>' +
      '<h3>Address:</h3>' +
      '<p>' + '<address>' + '</p>' +
      '<p>' + '<city>' + '</p>' +
      '<p>' + '<country>' + '</p>';
    $venue.append(venueContent);
  });
  $destination.append('<h2>' + venues[0].location.city + '</h2>');
}

function renderForecast(days) {
  $weatherDivs.forEach(($day, index) => {
    let weatherContent =
      '<h2> High: ' + '<max temp>' + '</h2>' +
      '<h2> Low: ' + '<min temp>' + '</h2>' +
      '<img src="http://' + '<icon>' +
      '" class="weathericon" />' +
      '<h2>' + '<day of the week>' + '</h2>';
    $day.append(weatherContent);
  });
}

function executeSearch() {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDivs.forEach(day => day.empty());
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues();
  getForecast();
  return false;
}

$submit.click(executeSearch)

I’m pretty sure I’m missing something, or have completed one of the steps incorrectly, so I’m loathe to go any further.

Any assistance on completing steps 1-19 will be much appreciated.


#2

Is that supposed to be, venues[index].address? Likewise with the other attributes, city, country, max-temp, and min-temp, icon, day-of-the-week.

Since we are using ES6, have you considered using template literals for your strings?


#3

In the conditional statement where you have declared the variable ‘venues’ there is a double semicolon at the end of that line change that to a single semi colon.