Why is angularJS not binding data?

Question

I'm fetching maximum salary from Employee table. The JSON retrieves the data properly but why angular does not bind data?

Controller.js

app.controller('AdminCntrl', function ($scope, AdminServices) {
    $scope.BtnSubmit = function () {
        alert('ok1')
        var Bust = AdminServices.Getmax();

        Bust.then(function (d) {
            $scope.Emp = d.data;

            })
        }
})

Service.js

app.service('AdminServices', function ($http) {

    this.Getmax = function () {
        var ss = $http({
            url: '/Department/Max',
            method: 'Get',
            data:JSON.stringify(),
            content:{'content-type' : 'application/Json'}
        })
        return ss;
    }
})

Controller

public JsonResult Max()
        {
               var xxx = db.Employees.OrderByDescending(ww => ww.Salary).First();
            return new JsonResult { Data = xxx, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

Emp.cshtml

<div ng-controller="AdminCntrl">
        <input type="button" class="btn btn-primary btn-sm" value="Min" ng-click="BtnSubmit()" />

        <div ng-repeat="Accessor in Emp">
            {{Accessor.Id}}
            <span style="color:red">{{Accessor.Name}}</span>
        </div>
    </div>

Fiddler Catch Data

{"Id":11,"Name":"Saleem","Department":"Oracle","Salary":100000.00,"EmpType":"Admin","DataofJoin":"\/Date(1462127400000)\/","DataofBirth":"\/Date(597868200000)\/"}

brad · Accepted Answer · 2016-10-14 18:57:53Z

2

Is the value of $scope.Empequal to your Fiddler Data?

It appears you're not returning an array which is what ng-repeat is expecting. I'd bet if your Fiddler data was represented as an array:

[{"Id":11,"Name":"Saleem","Department":"Oracle","Salary":100000.00,"EmpType":"Admin","DataofJoin":"\/Date(1462127400000)\/","DataofBirth":"\/Date(597868200000)\/"}]

you'd see it bind.

Alternatively, if you're really not expecting an array then if you replace

<div ng-repeat="Accessor in Emp">
     {{Accessor.Id}}
     <span style="color:red">{{Accessor.Name}}</span>
</div>

with:

<div>
      {{Emp.Id}}
       <span style="color:red">{{Emp.Name}}</span>
</div>

You'd have some success

answered Oct 14, 2016 at 18:57

brad

5695 silver badges5 bronze badges

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

5 Comments

Md Hohn Over a year ago

Thank u soo much Mr.Brad but can u tel me without ng-repaet how its wors

brad Over a year ago

I'm not sure I understand your question "can u tel me without ng-repaet how its wors".

Md Hohn Over a year ago

i mean ng-repeat works as a foreach loop through it we will getting all the records 1 by 1 but here u did not use any repeat that my question ?Any how i got the ans

Gregório Kusowski Over a year ago

@MdHohn, you are using .First() in your Controller, so it isn't returning a list on the Data attribute.

brad Over a year ago

@GregórioKusowski since the controller action is named Max I'd only expect one result returned, I assumed that was his intention too.

Collectives™ on Stack Overflow

Why is angularJS not binding data?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related