角ng重复对象的动态数组

Question

Given a json of array of objects, how could one display it using a ng-repeat dynamically? error key is static / always remain the same. Just the values of error changes. So if I have the password field errored-out then I'll have password key instead on the error

{ 
  "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."
    }
  }
}

I tried doing:

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

But it displays this instead:

0 - [
0 - ]

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

Answer 2

EDIT

I think the first thing you have to consider is to normalize your json if you have control over that and represent it like this

$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."
        }
    }
}

Why this because you cant have two field named error on a same object or array. After this the first solution provided must work

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

Answer 3

Make sure you are using the ng-repeat on the right object. You have:

ng-repeat="message in errormessage"

and the content of errormessage seems to be "[]" . See http://jsfiddle.net/hgk6vsqv/

Answer 4

Some observations :

• Given a json of array of objects . Your JSON is not an array of Objects .
• Try this ng-repeat="message in errormessage.error" instead of ng-repeat="message in errormessage"

DEMO

 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>