Question

我有一个从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>

Answer 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来说明解决方案。

Answer 2

检查您的JSON，它无效。您的详细信息对象的第二个属性结构不合理检查{和}，它们放置不正确。

您可以使用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接缝确定，只需添加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>

我希望这会有所帮助

Answer 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>

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

3 个答案: