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!

What do you wanna display? You should write {{errors.email}} or better, create an array of errors and then display it with an ng-repeat — Mario Levrero
– Mario Levrero, Commented May 13, 2014 at 14:11

Artem Petrosian · Accepted Answer · 2014-05-13 14:26:04Z

3

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

edited May 13, 2014 at 14:26

answered May 13, 2014 at 14:16

Artem Petrosian

2,9541 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

klinore Over a year ago

That is a great idea :D. I will do that. But it still doesn't solve the issue of the displayed error message then being (for email): '["The email field is required."]'. How do I get it to show the data without the brackets and quotes?

Artem Petrosian Over a year ago

@user2522373 I've added fiddle demo, there are no brackets, only the text. Could you check it again?

klinore Over a year ago

Whoa! You are right. It works great! Why does this work differently than using {{ error.email }} (aside from looping through)? Using just {{ error.email }} I still got the brackets and quotes.

Artem Petrosian Over a year ago

@user2522373 I think because error.email contains an Array

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related