Keyur Shah Keyur Shah - 6 months ago 24
AngularJS Question

Anjularjs Check checkbox based on 2 json object

I'm new to angularjs, I'm creating a Edit & Update form for employee. I get my employee data using the following code.

$scope.details={};
$scope.roledata=[];
$http({url: 'someurl.php', method: "GET", params: {user_id: eid} }).then(function(response){
$scope.roledata = $scope.details.role;
});


$scope.roledata contains role assigned to employee.

Then i have made another $http for getting list of all role.

$scope.commondetails={};
$scope.roledata=[];
$http({url: 'someurl.php', method: "GET", params: {comp_id: comp_id} }).then(function(response){
$scope.role = $scope.commondetails.role;
});


$scope.role contains the list of all role.

This is the output of both list.
1) $scope.roledata


{"role":[{"currentrole":"approver","currentroledes":"Approver"},{"currentrole":"employee","currentroledes":"Employee"},{"currentrole":"hr","currentroledes":"Human
Resource"},{"currentrole":"mms_account_manager","currentroledes":"MMS
Account
Manager"},{"currentrole":"salary_input_provider","currentroledes":"Salary
Input
Provider"},{"currentrole":"support_engineer","currentroledes":"support
engineer"}]}


2) $scope.role


{"role":[{"id":"0","value":"Select
Role"},{"id":"access_point_in-charge","value":"Access point
in-charge","selected":"false"},{"id":"approver","value":"Approver","selected":"false"},{"id":"city_head","value":"City
Head","selected":"false"},{"id":"cost_centre_head","value":"Cost
centre
head","selected":"false"},{"id":"department_head","value":"Department
head","selected":"false"},{"id":"employee","value":"Employee","selected":"false"},{"id":"employee_without_email_id","value":"Employee
Without Email ID","selected":"false"},{"id":"hr","value":"Human
Resource","selected":"false"},{"id":"location_head","value":"Location
Head","selected":"false"},{"id":"mms_employee","value":"employees not
on MMP","selected":"false"},{"id":"office_admin","value":"office
administrator","selected":"false"},{"id":"personnel","value":"Personnel","selected":"false"},{"id":"recruiter","value":"Recruitement
Officer","selected":"false"},{"id":"salary_input_provider","value":"Salary
Input Provider","selected":"false"},{"id":"shift
_in_charge","value":"Shift In-charge","selected":"false"},{"id":"supervisor","value":"Supervisor","selected":"false"},{"id":"support_engineer","value":"support
engineer","selected":"false"},{"id":"time_office","value":"Time
Office","selected":"false"}]}


Here is my HTML.

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" width="30%">
<b>Current Role : </b>
</td>
<td width="70%">
<table width="100%" border="0">
<tr ng-repeat="role in roledata">
<td>
<b>{{role.currentroledes}}<br></b>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td width="30%" valign="top"><b>Change To :
</b>
</td>
<td width="70%">
<table>
<tr ng-repeat="allrole in role">
<td>
<b>
<input type="checkbox" ng-model="allrole.id" />
<label>{{allrole.value}}</label>
</b>
</td>
</tr>
</table>
</td>
</tr>
</table>


And this is what i have on controller.js

var app = angular.module('myApp', []);
app.controller('RegisterCtrl',function($http,$scope,$location) {

//https calls for role and roledata.

$scope.role.forEach(function(item){
$scope.roledata.forEach(function(savedItem){
if(savedItem.currentroledes === item.value){
item.selected = true;
console.log(item);
return true
}
})
});


I want to check those role which are assigned to employee in role list i.e in $scope.role. which i tried using the above foreach loops. but when the foreach runs the $scope.role and $scope.roledata are blank.

the problem is $scope.role and $scope.roledata are blank outside $http.get() after some googling i found out its because of asynchronous call. how to preserve the $scope outside the $http.

Answer

You could go for nested async calls. Once the list of all roles is available, make a $http call to the fetch the role of specific user.

Through this, if $scope.roledata == null, there would be no iteration over the $scope.role to check/uncheck the role assigned.

$http({url: 'someurl.php', method: "GET", params: {comp_id: comp_id} }).then(function(response){
  $scope.role = $scope.commondetails.role;

  if($scope.role != null) {
    $http({url: 'someurl.php', method: "GET", params: {user_id: eid} }).then(function(response){
     $scope.roledata = $scope.details.role;
    });

    if($scope.roledata != null){
       $scope.role.forEach(function(item){
        $scope.roledata.forEach(function(savedItem){
          if(savedItem.currentroledes === item.value){
             item.selected = true;
             console.log(item);
             return true;
           }
         })
       });
      }
    }
});