Ajax call is not working in angularjs

Question

I am trying to implementing ajax call on a controller to get the list of all the students but i am not getting it on a button click I am putting my code here please anyone help

  module.controller("GetController", function ($scope, $http) {
    $scope.getUser = function () {
        console.log(getUser);
            var getdata=  $.ajax({
            type: 'POST',
            url: "/GetUserDetails",
            dataType: "json",
            contentType: "application/json",
            data: '{}',
            success: function (data) {
                var parsed = $.parseJSON(data.d);
                $.each(parsed, function (i, jsondata) {
                    $("#showdata").append("ID: " + jsondata.Id + "<br/>" + "FirstName: " + jsondata.FirstName + "<br/>" + "SecondName: " + jsondata.SecondName + "<br/>" + "EmailId: " + jsondata.EmailId + "<br/>" + "Mobile: " + jsondata.Mobile);
                });
            },
            error: function (XHR, errStatus, errorThrown) {
                var err = JSON.parse(XHR.responseText);
                errorMessage = err.Message;
                console.log(errorMessage);
            }
        });
    }
});

Here is the html

 <div ng-controller="GetController" id="showdata">
   <table>
       <tr>
           <td>Id</td>
           <td>FirstName</td>
           <td>SecondName</td>
           <td>EmailId</td>
           <td>Mobile</td>
       </tr>
       <tr>
           <td>{{Id}}</td>
           <td>{{FirstName}}</td>
           <td>{{SecondName}}</td>
           <td>{{EmailId}}</td>
           <td>{{Mobile}}</td>
       </tr>
   </table>       
   <input type="submit" ng-click="getUser()" value="Getdata" />

and here is the controller code

 [HttpPost]
    [Route("GetUserDetails")]
    public async Task<bool> GetUserDetails([FromBody]object obj)
    {
        return await CenterGateWay.GetStudentlist();

    }

How specifically is it failing? Is there an error on the JavaScript console? Are Angular and jQuery loaded? Does the code execute at all? Is the AJAX request made? What is the server's response? "It doesn't work" isn't a very useful description of the problem. (Also, why does `GetStudentList` and `GetUserDetails` return a `bool`? That seems... misleading.) — David, Nov 23 '16 at 10:09
You use jquery and angular in a wrong way. Don't do DOM manipulation in your controller, instead only push it to models where you render it with angular. — devqon, Nov 23 '16 at 10:12
whats in your network pannel in dev tools? are you sure getting any response from server? — Fahad Khan, Nov 23 '16 at 10:14
ajax call is working (sure) but you'll never see the dom updated cause you are not using angularJS to update it. Chek this please...http://stackoverflow.com/questions/22209117/create-table-from-json-data-with-angularjs-and-ng-repeat — Jaime García Pérez, Nov 23 '16 at 10:15
Sir i am using visual studio 2015 for development and nopt getting responce from server and also there is not any error in console when i click on button — Gaurav_0093, Nov 23 '16 at 10:15

devqon · Accepted Answer · 2016-11-23T10:21:57.857

You misuse the combination of jquery and angular. Don't ever do DOM manipulation in your controller, instead let angular handle it. Something like this should work:

$scope.users = [];

$scope.getUser = function () {
    $.ajax({
        type: 'POST',
        url: "/GetUserDetails",
        dataType: "json",
        contentType: "application/json",
        data: '{}',
        success: function (data) {
            // you have to trigger the digest cycle here,
            // because you use jquery's ajax which won't automatically be
            // picked up by angular
            $scope.$apply(function(){
                $scope.users = angular.fromJson(data.d);
            });
        },
        error: function (XHR, errStatus, errorThrown) {
            var err = angular.fromJson(XHR.responseText);
            errorMessage = err.Message;
            console.log(errorMessage);
        }
    });
}

And in your view:

<table>
    <tr>
        <td>Id</td>
        <td>FirstName</td>
        <td>SecondName</td>
        <td>EmailId</td>
        <td>Mobile</td>
    </tr>
    <tr ng-repeat="user in users">
        <td>{{ user.Id }}</td>
        <td>{{ user.FirstName }}</td>
        <td>{{ user.SecondName }}</td>
        <td>{{ user.EmailId }}</td>
        <td>{{ user.Mobile }}</td>
    </tr>
</table>

Even better, there is no need to use jquery at all:

$scope.getUser = function () {
    $http.post("/GetUserDetails").then(function(data) {
        $scope.users = data.d;
    }, function(error) {

    });
}

Ajax call is not working in angularjs

1 Answers1