Format AngularJS ng-repeat text obtained from Laravel API

Question

I have a Laravel 5.2 Backend API and a AngularJS Frontend and at some point I perform a laravel validation and return and error if validation fails.

When I iterate trough errors and display them on the frontend I get somthing like this:

["The email has already been taken."]

and I would like to be like this

The email has already been taken.

without the [""] stuff.

My code is:

Angular controller:

if (error.statusText === "Unprocessable Entity") {

          $scope.registerErrors = error.data;
}

Angular template:

<div class="alert alert-warning animated pulse" ng-if="registerError && isLoading === false">
<p ng-repeat="(error, errorText) in registerErrors">{{errorText}}</p>
</div>

Laravel controller:

$this->validate($request, [
          'firstname' => 'required|max:100|min:3',
          'lastname' => 'required|max:100|min:3',
          'email' => 'required|email|unique:users|max:255',
]);

Console.log:

Thanks in advance!

use a filter that replaces /[\[\]\'\"]/g with ''?

Daniel Lizik
– Daniel Lizik

2016-05-04 18:36:51 +00:00
Commented May 4, 2016 at 18:36 — Daniel Lizik
– Daniel Lizik, Commented May 4, 2016 at 18:36
I will try to make a custom filter ... thanks

Catalin Cardei
– Catalin Cardei

2016-05-04 18:39:17 +00:00
Commented May 4, 2016 at 18:39 — Catalin Cardei
– Catalin Cardei, Commented May 4, 2016 at 18:39

Shaishab Roy · Accepted Answer · 2016-05-05 06:54:07Z

1

because of errorText contain email array and you shown full email array. if email contain multiple error then can try like:

<p ng-repeat="(error, errorObject) in registerErrors">
  <span ng-repeat=" singleError in errorObject">{{singleError}}</span>
</p>

or for single error can try like:

<p ng-repeat="(error, errorText) in registerErrors">{{errorText[0]}}</p>

or just assign error.data.email instead of error.data

if (error.statusText === "Unprocessable Entity") {
     $scope.registerErrors = error.data.email;
}

edited May 5, 2016 at 6:54

answered May 4, 2016 at 18:35

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

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

2 Comments

Shaishab Roy Over a year ago

use span tag in p tag should be work updated my answer @vitaminasweb

Catalin Cardei Over a year ago

It's working! I have some doubts on what will happens if error.data will contain and array of arrays ... I tried to simulate several validation fails on the backend and it seams that laravel return the first encountered error when using $this->validate($request ... It's ok for me. Thanks to everyone!

Hongbin Wang · Accepted Answer · 2016-05-04 21:03:50Z

1

Actually you need change $scope.registerErrors = error.data; into $scope.registerErrors = error.data.email;. Because error.data.email is an array.

If you have several errors at the same time, it's better to try this

if (error.statusText === "Unprocessable Entity") {
      $scope.registerErrors=[];
      if(error.data.email)$scope.registerErrors.push(error.data.email[0]);
      if(error.data.firstname)$scope.registerErrors.push(error.data.firstname[0]);
      if(error.data.lastname)$scope.registerErrors.push(error.data.lastname[0]);
}

edited May 4, 2016 at 21:03

answered May 4, 2016 at 18:39

Hongbin Wang

1,1862 gold badges14 silver badges34 bronze badges

5 Comments

Catalin Cardei Over a year ago

The error.data will not always contain just email, could contain other several errors in the same time ... for that reason I use ng-repeat

Hongbin Wang Over a year ago

You can add the cases of firstname and lastname, I've updated the answer

Hongbin Wang Over a year ago

If you have several errors at the same time, you can see the updated answer.

Hongbin Wang Over a year ago

Thanks, hope it could be helpful

Catalin Cardei Over a year ago

Yes it is. But I already marked as correct other answer. Your solution seams very god too. I sew it late . :( ... Thanks again!

Kyle · Accepted Answer · 2016-05-04 18:38:53Z

0

Working fiddle: https://jsfiddle.net/udr9dksa/

{{emailTaken | cleanError}}

Filter:

app.filter("cleanError", function() {
    return function(input) {
    if(!input) return "";

    return input.slice(2, -2);
  }
});

answered May 4, 2016 at 18:38

Kyle

5,6077 gold badges38 silver badges48 bronze badges

1 Comment

Catalin Cardei Over a year ago

For some reason it's not work well ... I get as response only [ ]

Collectives™ on Stack Overflow

Format AngularJS ng-repeat text obtained from Laravel API

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related