无法循环通过ng-repeat内的字符串数组

问题描述：

我有一个从servlet返回的Java对象，我将其转换为JSON并作为范围变量反馈给角度显示。无法循环通过ng-repeat内的字符串数组

这个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-重复除“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似乎并不正确。检查它是否有效。 –

这是无效的 - http://jsonlint.com/ – reedb89

Arr1中有重复。尝试'ng-repeat =“在item.Arr1中的val按$ index”' –

答

您提供的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对我的JSONs非常有帮助。谢谢Ben Beck。 – user4923462

@ user4923462，不客气:) –

答

检查你的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>

我希望这可以帮助

答

一些意见，按您的代码：

你JSON无效

它的结构应是这样：
使用ng-repeat="(key,val) in detail.details"代替ng-repeat="item in detail.details"作为detail.details是一个对象不是一个数组。

DEMO

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

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

<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内的字符串数组

相关推荐