无法从 JSON 中获取正确的“键”值 - AngularJS答案

【问题标题】：Unable to get proper 'key' value from JSON - AngularJS无法从 JSON 中获取正确的“键”值 - AngularJS
【发布时间】：2017-07-18 17:15:52
【问题描述】：

我的目标是使用来自以下示例嵌套 JSON 的 AngularJS 实现以下格式的表格。

{
  "traits": ["Number of Observations","Observed Number of Exceptions","95-99", "95-95","99-95", "99-99"],
  "values": [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  ]
}

“values”键下有两个对象，它们依次会在表中创建两行。我在这里用 JSON 创建表的问题是，我需要遍历“95-95”对象、“95-99”对象等，并为每个对象创建“3”列。使用下面的代码，我能够在“95-95”对象下创建 3 列；但正如您所见，我在 ng-repeat 中使用 'AAAA1' 键值进行了硬编码。 在表中的行级别，我正在使用最外层的 json 循环；对于“td”创建循环通过最内层的 JSON 对象，因此无法获取中间级别的对象键值。 strong> 有什么方法可以从不在任何ng-repeat 中的任何键值“AAAA1”、“AAAA2”中获取它。

<tr ng-repeat="(key,value) in Controller.values">

    <td class="text-center"  ng-repeat="(key1,value1) in value['AAAA1']['95-95']">
        {{value1}}                   
    </td>

由于我无法做到这一点，我目前卡在下面的静态代码中，这对我来说不是很有用。

<td class="text-center"  ng-repeat="(key1,value1) in value">
       {{value1["95-95"]["Test Statistic"]}}                 
</td>

<td class="text-center" ng-repeat="(key1,value1) in value"> 
    {{value1["95-95"]["P-Value"]}}                   
</td>

<td class="text-center" ng-repeat="(key1,value1) in value">
    {{value1["95-95"]["Test Outcome"]}} 
</td>

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

因为value['AAAA1']['95-95'] 必须是一个数组。

ng-Repeat 仅适用于数组 :(

【讨论】：

ng-repeat 使用以下语法处理对象：(key, value) from object
关键是索引
在数组中是的。数组“非常类似于”以索引为键的对象。
这个对象在 angular 1.x 中从来没有为我工作过，我总是不得不将它包装在一个数组中以使其工作。
很奇怪它应该可以工作。它甚至被记录在here

【解决方案2】：

如果你想避免控制器中的指令或代码，你可以这样做：

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {
	$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
    <tbody ng-repeat="value in values">
      <tr ng-repeat="(name, objectAA) in value">
        <th ng-bind="name"></th>
        <td ng-repeat="(key, value) in objectAA['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in objectAA['95-99']" ng-bind="value">
          
        </td>
      </tr>
    </tbody>
  </table>
</body>

为避免 html 中的静态“95-95”和“95-99”，您可以在控制器中提取它们。

使用控制器中的特定代码，您可以这样做：

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {

  $scope.rows = []

	$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
  
  $scope.values.forEach((value) => {
    Object.keys(value).forEach((name) => {
      $scope.rows.push({name: name, value: value[name]});
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
      <tr ng-repeat="row in rows">
        <th ng-bind="row.name"></th>
        <td ng-repeat="(key, value) in row.value['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in row.value['95-99']" ng-bind="value">
          
        </td>
      </tr>
  </table>
</body>

【讨论】：

根据你的sn-p，它会在表中创建多个tbody。
是的，但如果没有自定义指令，我看不到任何其他方式
我刚刚在控制器中添加了一个带有代码的解决方案