Angular ng-repeat dynamic array of objects

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

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 3

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>

Answer 4

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>