0

I'm working with the MapQuest API (Geocoding + Please Search end points) using jQuery. The goal is to store the lat/long value that was populated from user input in the first API and passing these values in the next API within the 'circle' parameter. Full code below:

codeBreakApp.searchResults = (location, query) => {
   $.ajax({
      url: codeBreakApp.searchEndPoint,
      method: 'GET',
      dataType: 'JSON',
      data: {
         key: codeBreakApp.apiKey,
         location: location,
      },
   }).then((res) => {
      console.log(res);
      console.log(res.results[0].locations[0].latLng);
      
      let locationLng = (res.results[0].locations[0].latLng.lng);
      let locationLat = (res.results[0].locations[0].latLng.lat);
      
      console.log(locationLng);
      console.log(locationLat);
      
      $.ajax({
         url: codeBreakApp.placeEndPoint,
         method: 'GET',
         dataType: 'JSON',
         data: {
            key: codeBreakApp.apiKey,
            circle: [locationLng, locationLat, 5000],
            q: query,
            sort: 'relevance',
            pageSize: 10,
         },
      }).then((res) => {
         console.log(res);
         console.log('Found something');

      }).fail((err) => {
         console.log(err);
         console.log('Failed');
      });
   });
}

const userSearch = function() {
   $('.form').on('submit', function(e) {
      e.preventDefault();

      // Start location input
      let userLocationInput = $('input').val();
      console.log(userLocationInput);

      // Places input
      let selectedPlaceInput = $('#places option:selected').text();
      console.log(selectedPlaceInput);


      codeBreakApp.searchResults(userLocationInput, selectedPlaceInput);
   });
}

// Initializing functions
codeBreakApp.init = function () {
   codeBreakApp.searchResults((''), (''));
   userSearch();
}

// Document ready
$(function () {
   codeBreakApp.init();
});

My console logs return the info I'm looking for from the form input values and I'm able to retrieve the lat/long from the first API results object - but when I run the second API, nothing happens. Any ideas on how to get around this?

Thanks!

kdlry
  • 1
  • Second api should run itself as its in a promise - as soon first one is done it should run. What you mean by when i run second API ? – Always Helping Sep 20 '20 at 00:41
  • The second API doesn't return a response in the console.log(res) or console.log(err). I think this has to do with the way I'm bringing the locationLat and locationLng variables (storing the lat + long integeger from the first API results) and including as a value in 'circle' for the second API. – kdlry Sep 20 '20 at 01:05
  • Regardless it its returning a locationLat or not. the ajax will run and throw errors if locationLat is missing. What i am saying that it should run AS LONG as the first console.log(res) is showing. – Always Helping Sep 20 '20 at 01:07
  • I managed to get the following error, and it seems its directly linked to the 'circle' parameter. I even tried to throw in some static long/lat coords and no dice! Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.mapquestapi.com/search/v4/place?key=rNUBvav2dEGGss4WVvHK64tVGGygn3zB&circle%5B%5D=-75%2C%2045%2C%205000&q=Tennis%20Court&sort=relevance&pageSize=10. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). – kdlry Sep 20 '20 at 01:19
  • Great ! Looks like the API endpoint in the second API call has CORS issue - btw when i click on that `mapquestapi` i can see some data in my browser. – Always Helping Sep 20 '20 at 01:21
  • Heheh, I suppose an error is better than no error! Now, how to get around it... – kdlry Sep 20 '20 at 01:27
  • You can use CORS avoid url in your ajax request. add this URL before the ajax request url => `https://cors-anywhere.herokuapp.com/` and it should work fine – Always Helping Sep 20 '20 at 01:37
  • Hmmm, how do I add to this url: https://www.mapquestapi.com/search/v4/place – kdlry Sep 20 '20 at 01:42
  • try this => `https://cors-anywhere.herokuapp.com/https://www.mapquestapi.com/search/v4/place ` – Always Helping Sep 20 '20 at 01:43
  • I get 403 Forbidden – kdlry Sep 20 '20 at 01:46
  • i am not sure how to help further since CORS issues are based on the API which we have NO control of i am guessing. Check this question might help => https://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working - thanks – Always Helping Sep 20 '20 at 01:57
  • Thanks!! Appreciate the time you took to help :) – kdlry Sep 20 '20 at 01:58

0 Answers0