无法在角度 ng-repeat 中循环遍历字符串数组答案

【问题标题】：unable to loop through an string array within angular ng-repeat无法在角度 ng-repeat 中循环遍历字符串数组
【发布时间】：2017-04-13 00:59:09
【问题描述】：

我有一个从 servlet 返回的 Java 对象，我将其转换为 JSON 并反馈给 angular 作为要显示的范围变量。

这个 Java 对象连同一些字符串变量有一个字符串数组。

这是 JSON 的外观：（下面的 JSON 存储在 $scope.detail 上）

{"details":
{"0":{"Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null]},
{"1":{"Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null]}
}

我能够使用 ng-repeat 成功迭代项目，但“Arr1”除外。网站上的一些回复表明我应该能够使用另一个 ng-repeat 进行迭代，但以下内容对我不起作用。请建议。谢谢。

<table ng-repeat="item in detail.details">
    <tr>
        <td>item.Var1</td>
        <td>item.Var2</td>
        <td>
            <div ng-repeat="val in item.Arr1">
                  {{val}}
            </div>
         </td>
     </tr>
 </table>

【问题讨论】：

您的 JSON 似乎不正确。检查它是否有效。
是的，这是无效的 - jsonlint.com
Arr1 中有重复项。试试ng-repeat="val in item.Arr1 track by $index"

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

您提供的 JSON 不是有效的 JSON。通过最少的修改，我建议将其重新格式化为如下所示：

{
  "details": [
     {
        "Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null]
     },
     {
        "Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null]
      }
   ]
}

虽然现在这是有效的 JSON，但我仍然认为您应该考虑重新格式化 JSON，以便 AngularJS 应用更轻松地使用它。

这是一个Plunker 来说明解决方案。

【讨论】：

谢谢大家。这确实帮助我专注于 JSON 而不是迭代的角度语法。我在这里的错误是，在试图清理空值的 servlet 响应时，我最终弄乱了 JSON 格式。一旦我清除了它，它就像一个魅力。 Plunker 对我的 JSON 运行非常有帮助。谢谢本贝克。

【解决方案2】：

检查您的 JSON，它无效。您的 details 对象的第二个属性没有很好地检查 { 和 }，它们没有正确放置。

您可以使用https://jsonformatter.curiousconcept.com/ 重构您的 JSON 并检查错误

以下是更正后的 JSON：

{  
   "details":{  
      "0":{  
         "Var1":"val1",
         "Var2":"val2",
         "Arr1":[  
            "0",
            "0",
            "2",
            null,
            null,
            null
         ]
      },
      "1":{  
         "Var1":"val1",
         "Var2":"val2",
         "Arr1":[  
            "0",
            "0",
            "2",
            null,
            null,
            null
         ]
      }
   }
}

您的 HTML 接缝 OK，只需添加 track by $index 并使用插值运算符打印您的 item.Var1 和 item.Var2

<table ng-repeat="item in detail.details">
    <tr>
      <td>{{item.Var1}}</td>
      <td>{{item.Var2}}</td>
      <td>
        <div ng-repeat="val in item.Arr1 track by $index">
          {{val}}
        </div>
      </td>
    </tr>
</table>

希望对你有帮助

【讨论】：

【解决方案3】：

根据您的代码的一些观察：

您的JSON 无效

应该是这样的结构：
使用 ng-repeat="(key,val) in detail.details" 而不是 ng-repeat="item in detail.details" 因为detail.details 是对象而不是数组。

演示

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

myApp.controller('MyCtrl', function($scope) {
    $scope.detail = {
	"details": {
		"0": {
			"Var1": "val1",
			"Var2": "val2",
			"Arr1": ["0", "0", "2", null, null, null]
		},
		"1": {
			"Var1": "val1",
			"Var2": "val2",
			"Arr1": ["0", "0", "2", null, null, null]
		}
	}
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table ng-repeat="(key,val) in detail.details">
    <tr>
        <td>{{val.Var1}}</td>
        <td>{{val.Var2}}</td>
        <td>
            <div ng-repeat="item in val.Arr1">
                  {{item}}
            </div>
         </td>
     </tr>
 </table>
</div>

【讨论】：