Having trouble making an AJAX request work in AngularJS?

Question

Having trouble making an AJAX request work in AngularJS?

Just dipped my toes into the world of Angular (only a few hours in). Managed to tweak the demo to get close to what I need, but hitting a roadblock with my AJAX request.

After trying a variety of fixes, one puts me in an endless loop (discovered that's just how Angular operates), while another solution doesn't seem to do anything at all.

Here's what I've got so far (attempted to slot the peopleController pretty much everywhere):

Controller:

app.controller('MainController', ['$scope','$http', function($scope,$http) {
    //$http is working in this

    var scrollItems = [];

    for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
    }

    $scope.scrollItems = scrollItems;    


    function peopleController($scope,$http){
        // Simple GET request example :
        $http.get('/public/ajax.php').
        success(function(data, status, headers, config) {
            console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            scope.people = data;
            }).error(function(data, status, headers, config) {
                console.log("fail");          
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
     }          
}]);

HTML:

<div ng-controller="peopleController">
     {{people}}
</div>

Encountering this error though:

Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=peopleController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:6:416
    at Mb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:19:510)
    at nb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:20:78)
    at $get (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:74:494)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:415
    at r (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:7:408)
    at M (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:281)
    at g (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:51:201)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:50:309

Hoping to find some guidance here :)

Tried following other solutions as well

javascript ajax angularjs

Answer 1

Answer №1

Make sure to match the controller name in both your HTML and JavaScript files. If it's 'peopleController' in your HTML file, name it 'peopleController' in the controller instead of 'MainController'.

Then modify the following line:

function peopleController($scope,$http){

to:

function peopleController(){

Remember to use dependency injection in the controller function, not on the contained functions. The contained functions already have access to $something because they are within the scope of the controller function.

Answer 2

Make sure to match the controller name in both your HTML and JavaScript files. If it's 'peopleController' in your HTML file, name it 'peopleController' in the controller instead of 'MainController'.

Then modify the following line:

function peopleController($scope,$http){

to:

function peopleController(){

Remember to use dependency injection in the controller function, not on the contained functions. The contained functions already have access to $something because they are within the scope of the controller function.

Answer 3

Answer №2

Ensure that your view is connected to the specified controller, which in this case is MainController:

<div ng-controller="MainController">
        {{people}}
</div>

Within the controller, initialize the people variable as an empty array and bind it to the $scope object. Remove any unnecessary parameters from the peopleController function and trigger the request. Note: make sure to refer to $scope instead of just scope in the success handler.

$scope.people = [];

peopleController(); //initiate the ajax request

function peopleController(){ //remove unnecessary parameters
        // Example of a simple GET request:
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("worked");
            // This callback will be executed asynchronously
            // once the response is received
            $scope.people = data; //$scope instead of scope
      }).
      error(function(data, status, headers, config) {
      console.log("fail");        
        // Executed asynchronously in case of an error or
        // if the server responds with an error status.
      });
    }

The name peopleController() can be misleading since its main purpose is to fetch data. It might be more appropriate to rename it to getPeople().

Answer 4

Ensure that your view is connected to the specified controller, which in this case is MainController:

<div ng-controller="MainController">
        {{people}}
</div>

Within the controller, initialize the people variable as an empty array and bind it to the $scope object. Remove any unnecessary parameters from the peopleController function and trigger the request. Note: make sure to refer to $scope instead of just scope in the success handler.

$scope.people = [];

peopleController(); //initiate the ajax request

function peopleController(){ //remove unnecessary parameters
        // Example of a simple GET request:
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("worked");
            // This callback will be executed asynchronously
            // once the response is received
            $scope.people = data; //$scope instead of scope
      }).
      error(function(data, status, headers, config) {
      console.log("fail");        
        // Executed asynchronously in case of an error or
        // if the server responds with an error status.
      });
    }

The name peopleController() can be misleading since its main purpose is to fetch data. It might be more appropriate to rename it to getPeople().

Answer 5

Answer №3

To create a separate controller named peopleController, you must define it individually like so:

app.controller('MainController', ['$scope','$http', function($scope,$http) {
      //$http functionality is operational within this controller

      var scrollItems = [];

      for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
      }

      $scope.scrollItems = scrollItems;    



 }]);

 app.controller('peopleController', ['$scope','$http', function ($scope,$http){
        // Demonstrating a simple GET request example:
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("Request successful");
            // This callback will be executed asynchronously
            // upon receiving the response
            $scope.people = data;
          }).
          error(function(data, status, headers, config) {
          console.log("Request failed");        
            // Executed asynchronously if an error occurs
            // or server responds with an error status
          });
        } 
 }]);

Answer 6

To create a separate controller named peopleController, you must define it individually like so:

app.controller('MainController', ['$scope','$http', function($scope,$http) {
      //$http functionality is operational within this controller

      var scrollItems = [];

      for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
      }

      $scope.scrollItems = scrollItems;    



 }]);

 app.controller('peopleController', ['$scope','$http', function ($scope,$http){
        // Demonstrating a simple GET request example:
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("Request successful");
            // This callback will be executed asynchronously
            // upon receiving the response
            $scope.people = data;
          }).
          error(function(data, status, headers, config) {
          console.log("Request failed");        
            // Executed asynchronously if an error occurs
            // or server responds with an error status
          });
        } 
 }]);

Answer 7

Answer №4

To avoid conflicts, it is recommended to eliminate the usage of $scope and $http within the peopleController function.

Additionally, consider using ng-controller='MainController' instead of ng-controller='peopleController'.

It would be advisable to rename peopleController to getPeople if you intend for it to be a function rather than a controller.

Answer 8

To avoid conflicts, it is recommended to eliminate the usage of $scope and $http within the peopleController function.

Additionally, consider using ng-controller='MainController' instead of ng-controller='peopleController'.

It would be advisable to rename peopleController to getPeople if you intend for it to be a function rather than a controller.

Having trouble making an AJAX request work in AngularJS?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

ASP.NET CodeBehind Fails to Recognize Changes in TinyMCE Textarea

AngularJS: Utilizing ng-click in ui-select choices

Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of

Load styles in Nuxt asynchronously to improve performance

Ways to effectively utilize jQuery objects as arguments in the delegate function

Struggling to receive a successful reply from a web service

Is there a way to asynchronously load image src URLs in Vue.js?

What kind of output should a Server Side Component generate?

When executed, the Node application successfully compiles

Sending a POST request results in both the execution of the THEN and CATCH

during implementation of ng-repeat directive with JSON dataset

Tutorial on Removing and Re-Adding HTML Elements

Despite being used within useEffect with await, asynchronous function fails to wait for results

tips for setting the value of a checkbox to true in React Material-UI with the help of React Hooks

Having trouble with my AngularJS directive (possibly)?

Above the search box in jQuery Datatable's search box, there is search text displayed

By utilizing .focus() in iOS8, the virtual keyboard will be displayed and the page will automatically scroll upon touch

Calculate the duration in seconds using the console

Approach to retrieving data with Nodejs API

What is the process for sending a REST request in my specific situation?