Angular returning array values wrapped in []

Question

I am working on teaching myself Angular at the moment, and I am currently getting to grips with sending http requests from my angular front-end.

I am successfully sending a POST request, and I am also getting the correct error response back. The error response returned is from Laravel and basically a JSON response.

return Response::json(['message' => $validator->errors()], 422);

This returns something that looks like,

   {
       "message": {
           "first_name": ["The first name field is required."],
           "surname": ["The surname field is required."],
           "email": ["The email field is required."],
           "school_name": ["The school name field is required."]
       }
   }

In my angular template I have this in my controller for now,

app.controller('signupController', function($scope, $http) {
    console.log("...signup controller initialised...");
    $scope.formData = {};
    $scope.error = "";
    $scope.processForm = function() {
        console.log($scope.formData);
        var postForm = $http.post('http://homestead.app/api/invites/create', $scope.formData);
        postForm.success(function(data, status, headers, config) {
            $scope.message = data;
        });
        postForm.error(function(data, status, headers) {
            $scope.error = data;
            console.log($scope.error);
        });
    }
});

In my template I form entries that looks like this,

<div class="form-group">
    <label for="firstName" class="is-required">First Name</label>
    <input type="text" class="form-control" id="firstName" name="first_name" ng-model="formData.firstname" ng-class="{'has-error': error.message.first_name}">
    <div class="error__block">{{ error.message.first_name }}</div>
</div>

Now on error the form input get the has-error class assigned, but the error block shows something like this,

["The first name field is required."]

When I would have thought it would show something like this,

The first name field is required

Am I doing something incorrectly on my laravel end of my angular end?

If your function returns an array, that's how arrays get encoded in JSON. If you want just the string, maybe reference it with [0] to take the first element? Be aware this design might be intentional to accommodate multiple errors. — tadman
– tadman, Commented Oct 31, 2016 at 22:00
I am being so stupid (long day at work). My form inputs can have multiple validations errors returned with hence the arrays! — Udders
– Udders, Commented Oct 31, 2016 at 22:03

Michał Szulc · Accepted Answer · 2016-10-31 22:02:02Z

2

from what I see you're returning from laravel an array of string values for the field first_name . That doesn't really sound okay, shouldn't it be simply a string?

If not, join the first_name array and you'll get the whole name from multiple values in array.

answered Oct 31, 2016 at 22:02

Michał Szulc

213 bronze badges

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

Comments

Lucas · Accepted Answer · 2016-11-01 01:58:04Z

1

I don't know anything about Laravel so there may still be a way to change that, but you can make a change in your $http.success() function like this:

postForm.success(function(data, status, headers, config) {
    $scope.message = data[0];
});

Instead of setting $scope.message to the incoming array, it will grab the first element of the array and use that instead (index 0).

edited Nov 1, 2016 at 1:58

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

answered Oct 31, 2016 at 22:00

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular returning array values wrapped in []

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related