Anular JS issue

Question

I want get the leavebalance to my view using angular. Here is my code
$scope.LeaveApplyBalanceDataSource = {};
$scope.checkBalance = function () {
$http({
method: "GET",
url: "/ESS/GetAllLeaveBalanceByLeaveType",
params: { LeaveTypeId: $scope.LeaveApply.LeaveTypeId },
cache: false
})
.success(function (data) {
$scope.LeaveApplyBalanceDataSource = data;
$scope.TotalBalance = data.Balance;
$scope.TotalApply =data.TakenLeaves;
$scope.TodalDays =data.Days;

                        });  
                }  

And it shows the result like below in data

Now i want that balance, takenleaves and days in scope value. but it is giving result as 'un-defined'.

Answer 1

This is really just a JS issue. Look at the type of data. It is an array, not an object. The call you're making is returning back an array so if you expect only 1 value back then you'll need to get the first item in the array.

   //Ignoring error checking here...  
   var item = data[0];  
   $scope.TotalBalance = item.Balance;  
   ...