Angular ng-repeat 动态对象数组答案

【问题标题】：Angular ng-repeat dynamic array of objectsAngular ng-repeat 动态对象数组
【发布时间】：2017-08-11 05:38:33
【问题描述】：

给定一个 json 对象数组，如何使用 ng-repeat 动态显示它？ error 键是静态的/始终保持不变。只是error 的值发生了变化。因此，如果我的密码字段出错，那么我将在 error 上使用 password 键

{ 
  "error":  {
    "firstName": {
      "0": "The first name field is required.",
      "1": "The first name field must have 2-5 characters."
    },
    "lastName": {
      "0": "The last name field is required."
    }
  }
}

{ 
  "error":  {
    "password": {
      "0": "The password field is required."
    }
  }
}

我试过了：

<ul ng-repeat="message in errormessage">
    <li ng-repeat="(k,v) in message">
         {{k}} - {{v}}
    </li>
</ul>

但它会显示这个：

0 - [
0 - ]

【问题讨论】：

您的 JSON 无效。
为什么不是有效的 JSON？
用在线验证器试试吧。
再试一次。那里有2个json。没有。
那就对了。

标签： javascript angularjs json multidimensional-array

【解决方案1】：

angular.module('app', [])
  .controller('SampleCtrl', function($scope) {
    $scope.errormessage = {
      "error": {
        "firstName": {
          "0": "The first name field is required.",
          "1": "The first name field must have 2-5 characters."
        },
        "lastName": {
          "0": "The last name field is required."
        },
        "passowrd": {
          "0": "The password field is required."
        }
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SampleCtrl">

  <ul ng-repeat="message in errormessage">
    <li ng-repeat="(k,v) in message">
      <b>{{k}}:</b><br>
      <ul>
        <li ng-repeat="err in v">
          {{err}}
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

返回字符串而不是数组似乎很奇怪。像这样{"error":{"firstName":{"0":"The first name field is required.","1":"The first name field must have 2-5 characters."},"lastName":{"0":"The last name field is required."},"passowrd":{"0":"The password field is required."}}}
虽然使用track by $index 出现此错误Error: ngRepeat:dupes Duplicate Key in Repeater，但会将每个字母显示为一个数组。
听起来你正在循环一个字符串而不是有效对象。您可能需要解析 JSON 字符串。使用JSON.parse(YOUR_ERROR_RESPONSE)

【解决方案2】：

确保您在正确的对象上使用 ng-repeat。你有：

ng-repeat="message in errormessage"

errormessage 的内容似乎是"[]"。见http://jsfiddle.net/hgk6vsqv/

【讨论】：

更好地解释使它工作所需的东西，而不是设置一个不工作的演示。他们已经有一个非工作版本

【解决方案3】：

一些观察：

Given a json of array of objects。您的 JSON 不是 array of Objects。
试试这个ng-repeat="message in errormessage.error" 而不是ng-repeat="message in errormessage"

演示

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

myApp.controller('MyCtrl',function($scope) {
    $scope.errormessage = { 
  "error":  {
    "firstName": {
      "0": "The first name field is required.",
      "1": "The first name field must have 2-5 characters."
    },
    "lastName": {
      "0": "The last name field is required."
    }
  }
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 <ul ng-repeat="message in errormessage.error">
    <li ng-repeat="(k,v) in message">
         {{k}} - {{v}}
    </li>
</ul>
</div>

【讨论】：

【解决方案4】：

编辑

我认为你必须考虑的第一件事是规范化你的 json，如果你可以控制它并像这样表示它

$scope.errormessage = {
  "error": {
        "firstName": {
            "0": "The first name field is required.",
            "1": "The first name field must have 2-5 characters."
        },
        "lastName": {
            "0": "The last name field is required."
        },
        "passowrd": {
             "0": "The password field is required."
        },
        "mail": {
            "0": "The first name field is required.",
            "1": "The first name field must have 2-5 characters."
        },
        "newsletter": {
             "0": "The newsletter field is required."
        },
        "address": {
             "0": "The address field is required."
        }
    }
}

为什么会这样，因为您不能在同一个对象或数组上拥有两个 名为错误的字段。在此之后，提供的第一个解决方案必须有效

<div ng-app="app" ng-controller="SampleCtrl">
    <ul ng-repeat="message in errormessage">
       <li ng-repeat="(k,v) in message">
         <b>{{k}}:</b><br>
         <ul>
            <li ng-repeat="err in v">
             {{err}}
            </li>
         </ul>
       </li>
    </ul>
</div>

【讨论】：