Steps for creating an AJAX request in AngularJS with parameters

Question

Steps for creating an AJAX request in AngularJS with parameters

I'm encountering a syntax error while attempting to fetch the user's location in AngularJS using an AJAX call.

app.controller('locationController', function($scope, $window) {

  $window.navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position);
    var lat = position.coords.latitude;
    var long = position.coords.longitude;

    $scope.$apply(function() {
      $scope.lat = lat;
      $scope.long = long;
    });
  });

  var city = function() {

    http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="
      lat ","
      long "&sensor=true").success(function(response) {
      console.log(response);
    });
  }
});

The specific error I'm facing is related to tokens; it requests deleting a token.

javascript ajax angularjs

Answer 1

Answer №1

Upon review, there are three key issues that need addressing:

The concatenation of strings in the http.get call seems to be incorrect.
lat and long variables appear to be out of scope within the city function. Perhaps you intended to use $scope.lat and $scope.long?

You have not injected the http service properly for use.

app.controller('locationController', function($scope, $window, $http) {    
   $window.navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position);
      var lat = position.coords.latitude;
      var long = position.coords.longitude;

      $scope.$apply(function() {
         $scope.lat = lat;
         $scope.long = long;
     });
  });

  var city = function() {

    $http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="
       + $scope.lat + ","
       + $scope.long + "&sensor=true").success(function(response) {
          console.log(response);
    });
  }
});

Answer 2

Upon review, there are three key issues that need addressing:

The concatenation of strings in the http.get call seems to be incorrect.
lat and long variables appear to be out of scope within the city function. Perhaps you intended to use $scope.lat and $scope.long?

You have not injected the http service properly for use.

app.controller('locationController', function($scope, $window, $http) {    
   $window.navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position);
      var lat = position.coords.latitude;
      var long = position.coords.longitude;

      $scope.$apply(function() {
         $scope.lat = lat;
         $scope.long = long;
     });
  });

  var city = function() {

    $http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="
       + $scope.lat + ","
       + $scope.long + "&sensor=true").success(function(response) {
          console.log(response);
    });
  }
});

Answer 3

Answer №2

Give this a try, don't forget to include $http in your code. When using AngularJS for AJAX requests, you have two options - either make a function call with specific action types (GET, POST, UPDATE, DELETE) or utilize a config object like $.ajax.

app.controller('locationController', function($scope, $window, $http) {  // updated
    var city = function() {

    $http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="  // updated
      lat ","
      long "&sensor=true").success(function(response) {
      console.log(response);
    });
  }
}

Answer 4

Give this a try, don't forget to include $http in your code. When using AngularJS for AJAX requests, you have two options - either make a function call with specific action types (GET, POST, UPDATE, DELETE) or utilize a config object like $.ajax.

app.controller('locationController', function($scope, $window, $http) {  // updated
    var city = function() {

    $http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="  // updated
      lat ","
      long "&sensor=true").success(function(response) {
      console.log(response);
    });
  }
}

Steps for creating an AJAX request in AngularJS with parameters

Answer №1

Answer №2

Similar questions

Creating a scrolling effect similar to the Nest Thermostat

Why does the element from a nested array in javascript return as undefined when I try to access it?

Steps for adding an image to Firebase

Automatically authenticate ngrok password using Python and JS: A step-by-step guide

Showing data in a grid format on a webpage

Press the delete button to remove both the box and text dynamically with JavaScript

Error: JavaScript alert box malfunctioning

Only Chrome causing my JavaScript execution to freeze due to Ajax

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

What could be causing angularjs to malfunction in this specific scenario?

Formik Fields with unique key properties

Having issues with Angular http.post not sending data when using subscribe

Debugging Typescript code with line numbers

I seem to be stuck in an endless loop within React and can't find a way to break free

How can I bring in a dynamic MaterialUI theme object from another file?

Trouble transmitting AJAX data to Django view

I'm having trouble getting my state to update in React when using useState

The browser automatically adds a backslash escape character to a JavaScript object

in node.js, virtual machine scripts can import modules using the require function

Tips on stopping the page from scrolling following an ajax request (return false not effective or potentially misplaced)