AngularJS function doesn't run

Question

I have the following angular factory and controller.

var app = angular.module("carForm", []);

app.factory("dataService", ['$http', function getData($http) {
    function getCars(){
        return $http({
            method: 'GET',
            url: '/data.json'
        }).then(function (response){
            console.log(response.data);
            return response.data
        },function (error){
            console.log("product error");
        })
    };
    return { getCars : getCars }
}]);

app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
    dataService.getCars().then(function(response){
        cars = response;

        $scope.make = [];
        for (key in cars){
            item = cars[key];
            console.log(item);
            $scope.make.push(item);
        }

        $scope.model = [];
        for (key in cars[$scope.selectMake]){
            item = cars[item][key_2]
            $scope.model.push(item)
        }
    })

    search = function(cars){
        cars[$scope.selectMake][$scope.selectModel][$scope.selectType]
    }


}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="col-12" ng-contoller="dataSort">
  <div class="row" style="text-align: center;">
    <div class="form-group col-6">
      <label for="inputState">Make</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectMake" selected>Select make</option>
        <option ng-repeat="item in make">{{ item }}</option> 
      </select>
    </div>
    <div class="form-group col-6">
      <label for="inputState">Model</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectModel" selected>Select model</option>
        <option ng-repeat="item in model">{{ model }}</option>
      </select>
    </div>
    <div class="form-group col-3">
      <label for="inputState">Type</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectType"selected>Select make type</option>
        <option ng-repeat="item in type">{{ model }}</option>
      </select>
    </div>
  </div>
</div>

I don't believe either factory or controller are running. Nothing is logged in console, neither the data or the error message. Angular is properly linked to my form as there is no {{ }} also the ng app is declared at the top of the html in the body tag using ng-app="carForm". The JS page is correctly linked to the html as when I console.log outside the angular function it prints. Angular is loaded before my JS script in the head tag, I cant figure out what I'm doing wrong.

Check that angular.js file is loaded into the browser. Check this into the "Network" tab of Developer's tools in the browser. — Harshad, May 15 '19 at 11:25
You spelled `ng-controller` wrong. That's why the controller isn't operating. — georgeawg, May 16 '19 at 03:37

Maher · Answer 1 · 2019-05-15T11:57:45.887

Your factory is uncorrected, because you didn't pass your function in return

Right way to make a factory

app.factory("dataService", ['$http', function($http) {
   var x = {};
   return x;
}]);

But even you change the code it's not work on your controller because you want to return response.data in $http as promise and this not happens, in the case you need $q as injection in your service.

var app = angular.module("carForm", []);

app.factory("dataService", ['$http', '$q', function ($http, $q) {
    var factory = {}

    factory.sample = function() {
        console.log("in factory!");
        return [1,2,3]
    }
    
    factory.getCars = function() {
        var deferred = $q.defer();
        $http.get("api").then(function(response){
           deferred.resolve(response.data);
        })
        return deferred.promise;
    }
        
    return factory;
}]);

app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
    $scope.items = dataService.sample();
    
    //uncomment when your api was ready
    
    //dataService.getCars().then(function(response){
    //    console.log(response);
    //})
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carForm" ng-controller="dataSort">
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    <ul>
</div>

still not working, your example works but my resource fails to load, again no error messages at all. I had a similar piece of code running fine which is why this had stumped me. — Andy58, May 15 '19 at 13:00
Hi..make your project online with 'codepen.io', i can help you my friend. — Maher, May 15 '19 at 15:55
Avoid the [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). — georgeawg, May 16 '19 at 03:22

score -1 · Answer 2 · answered May 15 '19 at 11:51

-1

Your factory is not correctly implemented Please change it like this.

app.factory("dataService", ['$http', function($http) {
    function getCars(){
        return $http({
            method: 'GET',
            url: '/data.json'
        }).then(function (response){
            console.log(response.data);
            return response.data
        },function (error){
            console.log("product error");
            })
        };
        return { getCars : getCars }
}]);

answered May 15 '19 at 11:51

prashant

1
3

Removing the name from factory construction function won't change anything. – georgeawg May 16 '19 at 03:29
please share your Json. – prashant May 16 '19 at 04:48

AngularJS function doesn't run

2 Answers2