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

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

Creating a bar chart in Chart JS using an array of data objects

In Firefox, using the new Date function within a string does not function as expected

Having trouble retrieving POST data with NodeJS/Express and an HTML form?

Tips on activating the CSS style while typing using the onChange event in React

Customize the theme of Ant Design for VueJS

Toggle classes on button click

How to retrieve values from dynamically generated text boxes using ng-repeat in AngularJS

Connecting the search results page with the specific details page

Tips for updating model data when integrating jQuery Data tables with ASP.NET MVC

What is the best method for choosing an element that has been dynamically loaded through ajax

What is preventing me from sending back an array of objects with an async function?

How to seamlessly integrate Redux into your React project using create-react-app?

Discovering the most recent messages with AJAX

Challenges faced when subscribing to global events in JavaScript

Experience the seamless integration of Restful APIs with AngularJS and Querystring parameters

Refreshing events in FullCalendar 5 using Vue.js's refetchEvents

Are you in need of a JavaScript data validation tool?

Tips for creating a textarea element that resembles regular text format

Issue with Bootstrap 4.2 modal: Unable to edit input fields, button cannot be clicked, modal does not close