AngularJs not rendering value

Question

I am new to AngularJS and need to use AngularJs to render my MVC controller Json output. Below is my MVC Controller that output Json:

        [HttpGet]
    public JsonResult GetAllData()
    {
        int Count = 50;
        return Json(Workflow.Teacher.GetTeachers(Count), JsonRequestBehavior.AllowGet);
    }

My Angular Controller that calls the GetAllData Action method:

    angular.module('myFormApp', [])
.controller('HomeController', function ($scope, $http, $location, $window) {
    $scope.teacherModel = {};
    $scope.message = '';
    $scope.result = "color-default";
    $scope.isViewLoading = false;
    $scope.ListTeachers = null;
    getallData();

//******=========Get All Teachers=========******  
    function getallData() {
        $http({
            method: 'GET',
            url: '/Home/GetAllData'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.ListTeachers = response;
            console.log($scope.ListTeachers);
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            $scope.errors = [];
            $scope.message = 'Unexpected Error while saving data!!';
            console.log($scope.message);
        });
    };

})
.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

Further my MVC layout markup is bellow:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Teachers List</h2>

<div id="content" ng-controller="HomeController">
    <span ng-show="isViewLoading" class="viewLoading">
        <img src="~/Content/images/ng-loader.gif" /> loading...
    </span>
    <div ng-class="result">{{message}}</div>

    <table class="table table-striped">
        <tr ng-repeat="teacherModel in ListTeachers">
            <td>{{teacherModel.TeacherNo}}</td>
            <td>{{teacherModel.TeaFName}}</td>
            <td>{{teacherModel.TeaSName}}</td>
        </tr>
    </table>

</div>

    @section JavaScript{
        <script src="~/Scripts/angular.js"></script>
        <script src="~/ScriptsNg/HomeController.js"></script>
    }

further to above my main layout's body tag also have ng-app

<body ng-app="myFormApp" >

I am using MVC version 5 with AngularJs v1.6.4. On debugging I can confirm that it does call getallData() actionMethod and does return rows in Json. I am not getting any error but its not rendering the model values either.

Any suggestions would be appreciated.

before $scope.ListTeachers = response; see what you are getting in console . then assign to it .. Also you make sure your scripting working well test it inside your controller {{3+4}} answer should be 7 - if not then you are facing scripting conflict — Asif Raza
– Asif Raza, Commented May 10, 2017 at 9:29

Sachila Ranawaka · Accepted Answer · 2017-05-10 09:23:49Z

2

use response.data to catch the data.

change

$scope.ListTeachers = response;

to this

$scope.ListTeachers = response.data;

answered May 10, 2017 at 9:23

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vladimir M Over a year ago

and then it will probably fail because he is overriding the object reference that angular is watchng.

Vladimir M · Accepted Answer · 2017-05-10 09:38:56Z

You have a number of problems with this code. Firstly, by assigning

$scope.ListTeachers = null;

you are making it more complicated to work with this variable later. If you expect REST interface to return you an array, then it is fine to make initial assignment as an empty array.

$scope.ListTeachers = [];

It is important because you should not override this object when you get a new result back. Angular adds its own magic to objects it is bound to, and by overriding an object you destroy that magic.

How you should update the data is something like this this:

then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.ListTeachers.length = 0;

        if( response && response.data){
            response.data.forEach(function callback(currentValue) 
                {
                    $scope.ListTeachers.push(currentValue);
                });
         }
        console.log($scope.ListTeachers);
    }

I hope this helps.

Ghazanfar Khan · Accepted Answer · 2017-05-10 09:25:09Z

1

Then callback response has several parameters like data , headers, status , statustext to check your request.

answered May 10, 2017 at 9:25

Ghazanfar Khan

3,7188 gold badges47 silver badges90 bronze badges

Collectives™ on Stack Overflow

AngularJs not rendering value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related