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
– David, Commented Nov 23, 2016 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
– devqon, Commented Nov 23, 2016 at 10:12
whats in your network pannel in dev tools? are you sure getting any response from server? — Fahad Khan
– Fahad Khan, Commented Nov 23, 2016 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...stackoverflow.com/questions/22209117/… — Jaime García Pérez
– Jaime García Pérez, Commented Nov 23, 2016 at 10:15

devqon · Accepted Answer · 2016-11-23 10:21:57Z

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) {

    });
}

Collectives™ on Stack Overflow

Ajax call is not working in angularjs

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related