Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I have a below JSON response, I need to populate my role information based on the role selected, I just moved roleinformation in roleInfo array , but the problem is I am unable to populate the key and value in the table accordingly.I am able to get the value , but couldnt populate in table. I couldn't move the key and its value to the table . I need move QA and Development with its sub key white box testing and Black box testing in my table. My for loop throw at error at end of termination.

JSON:

    {
      "json": {
        "response": {
          "servicetype": "1",
          "functiontype": "10011",
          "statuscode": "0",
          "statusmessage": "Success",
          "data": {
            "unassignedroles": [
              {"rolename":"1",
                "roleinformation": {
                  "QA": [
                    {
                      "White Box Testing": 0
                    },
                    {
                     "Black Box Testing": 10
                    }

                  ],
                       "Development": [
                    {
                      "White Box Testing": 0
                    },
                    {
                     "Black Box Testing": 10
                    }

                  ]
                }
              },
              {
`              "rolename":"2"`,
                "roleinformation": {
                  "1": [
                    {
                      "A": 0
                    }
                  ]
                }
              }

JS:

       var roleInfo = [];
        UserService.getAssignRoles(json).then(function(response) {

 if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')
{
    $scope.model.assignroles = [], assignrolesArray = [];

    var unasresdata = response.json.response.data.unassignedroles;
    var assresdata = response.json.response.data.assignedtoles;

    assignrolesArray = unasresdata.concat(assresdata);

    $scope.model.assignroles = assignrolesArray;
       for( var i = 0; i < assignrolesArray.length ; i++){

       if (($scope.model.rolename === assignrolesArray[i].rolename) && (assignrolesArray[i].rolename !== undefined )){
           roleInfo = assignrolesArray[i].roleinformation;
           for (i in roleInfo)

  }      
    }

    }
   });

HTML:

<select class="form-control" name="role"
      ng-model="model.rolename"
      ng-change="getAssignRole(data,model.rolename)">
         <option selected>Select Roles</option>
         <option ng-repeat="role in model.assignroles track by $index"
        value="{{role.rolename}}">{{role.rolename}}</option>
 </select>    
 <div>        
      <table class="smalltable">
           <thead>
               <tr ng-repeat="i(key, value) in roleInfo">
                   <td>{{ key }}</td>
                   <td ng-repeat="details in value">
     `                 <p ng-repeat"(subkey, subvalue) in details">{{ subkey }} : {{ subvalue }}</p>
                   </td>
                </tr>
            </thead>
       </table>
  </div>
share|improve this question
1  
can you add plunker for it? – Pravin Erande Sep 29 at 10:34
    
Hi , I get this response via REST API. I am afraid I can not plunker it . – Nicoleta Wilskon Sep 29 at 10:40
    
Your JS code seams to be incomplete. your inner for-clause for (i in roleInfo) doesn't have any content... – Daniel Sep 29 at 10:43
    
assignrolesArray[i].roleinformation is an object , but assigning it to roleinfo and using it as an array does not seem correct. – S Kumar Sep 29 at 10:46
    
Hi for(i in roleInfo) will give value of i as Q and Development. But it replace them as loop runs. Thats what my question is , how to seperate the key and Value. – Nicoleta Wilskon Sep 29 at 10:46

Used angular.extend() to concate the object for roleInfo

$scope.roleInfo={};

 for( var i = 0; i < assignrolesArray.length ; i++){
           $scope.roleInfo = angular.extend($scope.roleInfo,assignrolesArray[i].roleinformation);         

  }

Refer to the below code and plunker link

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div>       
      <table>
           <thead>
               <tr ng-repeat="(key,value) in roleInfo">
                   <td>{{ key }}</td>
                   <td ng-repeat="details in value">
                        <p ng-repeat="(subkey, subvalue) in details">
                           {{subkey}}:{{subvalue}}
                        </p>
                   </td>


                </tr>
            </thead>
       </table>
  </div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

var response =
{
    "json": {
        "response": {
            "servicetype": "1",
            "functiontype": "10011",
            "statuscode": "0",
            "statusmessage": "Success",
            "data": {
                "unassignedroles": [{
                    "rolename": "1",
                    "roleinformation": {
                        "QA": [{
                                "White Box Testing": 0
                            }, {
                                "Black Box Testing": 10
                            }

                        ],
                        "Development": [{
                                "White Box Testing": 0
                            }, {
                                "Black Box Testing": 10
                            }

                        ]
                    }
                }, {
                    "rolename": "2",
                    "roleinformation": {
                        "1": [{
                            "A": 0
                        }]
                    }
                }]

            }
        }
    }
};

 var unasresdata = response.json.response.data.unassignedroles;
 var assresdata = [{
                    "rolename": "1a",
                    "roleinformation": {
                        "QA": [{
                                "White Box Testing": 0
                            }, {
                                "Black Box Testing": 10
                            }

                        ],
                        "Development": [{
                                "White Box Testing": 0
                            }, {
                                "Black Box Testing": 10
                            }

                        ]
                    }
                }, {
                    "rolename": "2a",
                    "roleinformation": {
                        "1": [{
                            "A": 0
                        }]
                    }
                }];

    var assignrolesArray  = unasresdata.concat(assresdata);

     console.log("This is assignedrolesArray : "+ assignrolesArray);
     $scope.roleInfo={};

 for( var i = 0; i < assignrolesArray.length ; i++){
           $scope.roleInfo = angular.extend($scope.roleInfo,assignrolesArray[i].roleinformation);         

  }



});
</script>



</body>
</html>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.