CODEWITHSUNDEEP
angularjs
Cerebus1504
Cerebus1504

Reputation: 499

Multiple Http request in single controller

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

Upvotes: 3

Views: 2861

Answers (1)

khizar naeem
khizar naeem

Reputation: 296

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.

Upvotes: 3

Related Questions