How do I properly display a JSON response using angular js?

Question

The following is a json response returned to angular js for error codes:

{"email":["The email field is required."],"username":["The username field is required."],"password":["The password field is required."]}

I am binding a variable in my controller to the html to display the result:

angular js:

.success(function(data) {
  $scope.errors = data;
});

html:

{{ errors }}

The html result of this is:

{"email":["The email field is required."],"username":["The username field is required."],"password":["The password field is required."]}

How do I get rid of the brackets, quotes, ect. so that I see just the data? I feel like this is a silly question, but I can't seem to find a good answer. Thanks!

Answer 1

You should specify property which you want to display. And since you have an arrays in each property you can use ng-repeat to display data:

<p ng-repeat="error in errors.email">{{ error }}</p>

<p ng-repeat="error in errors.username">{{ error }}</p>

<p ng-repeat="error in errors.password">{{ error }}</p>

Fiddle