CODEWITHSUNDEEP
javascriptjqueryajaxangularjsget
steveareeno
steveareeno

Reputation: 1977

AngularJS $http get doesn't work but $.ajax does

I am new to AngularJS. I cannot seem to get $http to work. I have the following factory:

app.factory('employeeFactory', function ($http) {
    var factory = {};

    // get data form controller
    var employees = [];
    var Url = "../../../Employee/GetEmployees";

    // this does not work ----------------------------
    $http.get(Url, { params: { term: 'Step' }}).
      success(function (response, status, headers, config) {
          employees = response.data
      }).
      error(function (response, status, headers, config) {
          alert(error);
      });

    // this works using JQuery ajax ----------------------------
    $.ajax({
        url: Url,
        data: { term: 'Step' },
        dataType: "json",
        type: "GET",
        error: function (request, status, error) {
            alert(error);
        },
        success: function (response) {
            $.each(response.data, function (i, obj) {
                employees.push({ EmployeeName: obj.EmployeeName, EmployeeNumber: obj.EmployeeNumber });
            });
        }
    });

    factory.getEmployees = function () {
        return employees
    };

    return factory;
});

And the following controller:

app.controller('EmployeeController', function ($scope, employeeFactory) {
    $scope.employees = [];
    init();
    function init() {
        $scope.employees = employeeFactory.getEmployees();
    }
});

The ajax call in the factory works but the $https doesn't (both are in the factory, I just comment out one or the other while testing). I looked in google chrome dev tools and both calls return data in the same format, but the $http data is not being bound to the html:

<div class="container">
    <h4>This is view 1</h4>
    Type a name to filter: <input type="text" data-ng-model="employeeSearch" />
    <ul>
        <li data-ng-repeat="employee in employees | filter:employeeSearch | orderBy:'EmployeeName'">{{ employee.EmployeeName  }} - {{ employee.EmployeeNumber }}</li>
    </ul>
</div>

Here is the format the factory returns for both calls:

{data: [{EmployeeNumber:123456, EmployeeName:Johnson,Bob},…]
data: [{EmployeeNumber:123456, EmployeeName:Johnson,Bob},…]
    0: {EmployeeNumber:123456, EmployeeName:Johnson,Bob}
        EmployeeName: "Johnson,Bob"
        EmployeeNumber: "123456"

I don't understand why, when both calls return the data to the view in the same format, the binding is not occurring with the $http method. Any help is appreciated

Upvotes: 0

Views: 1397

Answers (2)

friedi
friedi

Reputation: 4360

The jQuery ajax works because you push to the returned reference.
In the angular ajax success handler you overwrite the variable, but the return value is still the empty reference.

So to get the angular $http function working, you should do the following in your success handler:

angular.forEach(response.data, function(value) {
    employees.push(value);
});

Upvotes: 4

Mukund Kumar
Mukund Kumar

Reputation: 23201

use this code:

service:

app.factory('employeeFactory', function ($http) {
    var employees = [];
    var Url = "../../../Employee/GetEmployees";
    var factory = {
     getEmp:function(){
         return $http.get(Url, { params: { term: 'Step' }})
     }
    }
    return factory;
});

controller:

app.controller('EmployeeController', function ($scope, employeeFactory) {
    $scope.employees = [];

    function init() {
        employeeFactory.getEmp().then(function(data){
         $scope.employees=data;
        })
        .catch(function(err){
         console.log(err);
        })
    }
  init();
});

Upvotes: 0

Related Questions