处理角度js中的循环答案

【问题标题】：Handling for loop in angular js处理角度js中的循环
【发布时间】：2016-09-29 10:08:30
【问题描述】：

我有以下 JSON 响应，我需要根据所选角色填充我的角色信息，我只是将角色信息移动到 roleInfo 数组中，但问题是我无法相应地填充表中的键和值。我能够获得值，但无法填充到表中。我无法将键及其值移动到 table 。我需要在我的表中使用其子键白盒测试和黑盒测试来移动 QA 和开发。我的 for 循环在终止结束时抛出错误。

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>

【问题讨论】：

你可以为它添加 plunker 吗？
嗨，我通过 REST API 得到了这个响应。恐怕我不能用它。
您的 JS 代码接缝不完整。你的内部 for 子句 for (i in roleInfo) 没有任何内容...
assignrolesArray[i].roleinformation 是一个对象，但将其分配给 roleinfo 并将其用作数组似乎并不正确。
Hi for(i in roleInfo) 将 i 的值作为 Q 和 Development。但它会在循环运行时替换它们。这就是我的问题，如何分离键和值。

标签： angularjs json angularjs-ng-repeat ng-repeat key-value

【解决方案1】：

使用 angular.extend() 为 roleInfo 连接对象

$scope.roleInfo={};

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

  }

参考以下代码和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>

【讨论】：