Multiple Http request in single controller

Question

var nameSpace = angular.module("MyTutorialApp", []);

nameSpace.controller("MainController", ['$scope', '$http',
    function($scope, $http)
    {
        $http.get("../api/api.php?fxn=" + encodeURIComponent("getCategories") +
                "&jsn=" + encodeURIComponent("{'code':'1'}"))
            .success(function(response)
            {
                $scope.names = response;
            });

        $scope.myData = {};
        nameSpace.controller("MainController", ['$scope', '$http',

        $scope.myData.doClick = function($event, name, $scope, $http,$config)
        {
            alert(name);
            var element = name;
            console.log(element);
            $http.get("../api/api.php?fxn=" + encodeURIComponent("getSubCategories") +
                    "&jsn=" + encodeURIComponent("{'code':'element'}"))
                .success(function(response)
                {
                    $scope.subCat = response;
                });
        }]);

    }
]);

<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="js/maincontroller.js"></script>

</head>
<body ng-app="MyTutorialApp" >

    <div ng-controller="MainController"> 

<table class="table">
   <tr class="row1" ng-repeat="list in names.category">
     <td ng-click="myData.doClick($event,list.name)">{{ list.name }}</td> 
   </tr>
</table>
</div>



</body>
</html>

Hi, i m not able to make the second http request , It says get property undefined. I tried for quite along time, i am not able to spot what is going wrong. Kindly Help me. I am just starting to use angular. To explain what I am trying to achieve , the first http request calls for the list of categories , the list is populated and after that on click of any of the category , the category is sent as the jsn for the second http request . And it fetch's the sub category

is there a specific reason for not using factory or service for http calls? — khizar naeem
– khizar naeem, Commented Sep 19, 2014 at 12:57
Not at all , i am not aware of it. It wasnt given in the Angularjs manual . and i am not sure how to use those — Cerebus1504
– Cerebus1504, Commented Sep 19, 2014 at 12:58
i will make a plunkr for you to make you understand the factory/service. for now you can try by replace $scope.myData.doClick = function($event, name, $scope, $http,$config) with $scope.myData.doClick = function($event, name) — khizar naeem
– khizar naeem, Commented Sep 19, 2014 at 12:59
It was just $scope.myData.doClick = function($event, name) in the start , but later i just lost my way and started trying all possible ways . I just got to get this working by today — Cerebus1504
– Cerebus1504, Commented Sep 19, 2014 at 13:02

Abhishek Pandey · Accepted Answer · 2017-02-23 10:14:26Z

Check this

// Code goes here
var nameSpace = angular.module("MyTutorialApp", []);
nameSpace.factory('factoryRefrence', ['$http', '$q',
  function($http, $q) {
    return {
      getCategories: function() {
        var deferred = $q.defer();
        $http.get("../api/api.php?fxn=" + encodeURIComponent("getCategories") +
            "&jsn=" + encodeURIComponent("{'code':'1'}"))
          .success(function(response) {
            deferred.resolve(response);
          });
        return deferred.promise;
      },
      getsubCategories: function(element) {
        var deferred = $q.defer();
        $http.get("../api/api.php?fxn=" + encodeURIComponent("getSubCategories") +
            "&jsn=" + encodeURIComponent({
              'code': element
            }))
          .success(function(response) {
            deferred.resolve(response);
          });
        return deferred.promise;
      }
    }
  }
]);
nameSpace.controller("MainController", ['$scope', '$http', 'factoryRefrence',
  function($scope, $http, factoryRefrence) {

    factoryRefrence.getCategories().then(function(response) {
      $scope.names = response;
    });

    $scope.myData = {};
    $scope.myData.doClick = function(event, name) {
      alert(name);
      var element = name;
      console.log(element);
      factoryRefrence.getsubCategories().then(function(response) {
        $scope.subCat = response;
      });
    }
  }
]);

Demo

this is the way to communicate with functions in factory. if you setup like this it should work fine. and besides in your code you are defining controller twice which is not okay.

TypeError: undefined is not a function, This is what it is saying when i click
Hi, the code works fine , but the element is not being sent in the jsn , which is a prime criteria , it is undefined

Collectives™ on Stack Overflow

Multiple Http request in single controller

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related