AngularJS + Laravel 5 Request returns Undefined

Question

So I have my Laravel:

Controller:

public function store(CreateRoomRequest $request)
{
    //Code
}

CreateRoomRequest:

class CreateRoomRequest extends Request
{
/**
 * Determine if the user is authorized to make this request.
 *
 * @return bool
 */

public function authorize()
{
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */

public function rules()
{
    return [
        'name' => 'required|unique:rooms|max:255',
        'short_description' => 'required',
        'long_room' => '',
        'long_other' => '',
        'long_houserules' => '',
        'long_neighbourhood' => '',
        'long_transportation' => '',
        'image' => '',
        'street' => 'required',
        'streetnumber' => 'required|numeric|max:5',
        'city' => 'required',
        'postalcode' => 'required|numeric|max:4',
        'roomnumber' => 'required',
        'type' => 'required|in:kamer,studio,loft, appartement, huis, villa, camper, boomhut, hut, trein, boot, tent, slaapzaal, zolder, overige',
        'link' => '',
        'latitude' => 'required',
        'longitude' => 'required',
        'ranking' => 'numeric'
    ];
}

/**
 * Return validation messages that apply to the request.
 *
 * @return array
 */
public function messages()
{
    return [
        'name.required' => 'Gelieve een advertentienaam in te vullen.',
        'name.unique' => 'Deze advertentienaam bestaat al. Gelieve een unieke advertentienaam in te vullen.',
        'name.max' => 'De advertentienaam is langer dan 255 tekens. Gelieve een kortere naam in te vullen.',
        'short_description.required' => 'Gelieve een description in te vullen.',
        'street.required' => 'Gelieve een straat in te vullen.',
        'streetnumber.required' => 'Gelieve u huisnummer in te vullen',
        'city.required' => 'Gelieve u stad in te vullen',
        'postalcode.required' => 'Gelieve u postcode in te vullen',
        'roomnumber.required' => 'Gelieve een kamernummer in te vullen.',
        'type.required' => 'Gelieve het type ruimte te specifiëren.',
        'type.in' => 'Het opgegeven type kamer is niet correct. Gelieve een geldig type te selecteren.',
        'latitude.required' => 'De opgegeven locatie kon niet gevonden worden. Gelieve een geldige locatie op te geven.',
        'longitude.required' => 'De opgegeven locatie kon niet gevonden worden. Gelieve een geldige locatie op te geven.'
    ];
}
}

And in my Laravel I have the following service (following Johnpapa):

        function createRoom(roomCreateData) {
        console.log(roomCreateData);
        return $http({
            method: 'POST',
            url: 'api/rooms',
            headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
            data: $.param(roomCreateData)
        }).then(createRoomSuccess).catch(createRoomError);

        function createRoomSuccess(response) {
            $log.info('Creating room success: ' + response);
            return response;
        }

        function createRoomError(error) {
            $log.info('Creating room failed because: ' + error);
            return error;
        }
    }

Without the validation. Everything works (storing,...). But when I want to validate my data with the CreateRoomRequest on a validation error I get the following:

A 422 unprocessable Entity (which is correct, because that's what Laravel returns when the validator fails (so my guess is the validator works). But, I don't get any messages. Every return I log is undefined.

The Laravel docs state:

If validation fails, a redirect response will be generated to send the user back to their previous location. The errors will also be flashed to the session so they are available for display. If the request was an AJAX request, a HTTP response with a 422 status code will be returned to the user including a JSON representation of the validation errors.

Now my question: Where is the JSON return?

Ps: I have also tried to remove my custom error messages, the same result.

Thanks in advance

Ohgodwhy Ohgodwhy · Accepted Answer · 2016-05-10T02:35:05

The 422 is the correct response for this. I think what you're missing here is that what happens is it triggers the error part of your code and the actual response object needs to have some mutations applied (specifically, grabbing the responseJSON property) to it in order for you to get the information that you want.

var errors = error.responseJSON;

If the responseJSON property is not available, then you may need to manually parse the responseText

var errors = JSON.parse(error.responseText);

Now errors will be iteratable in a traditional fashion and you can get the error message during the loop.

for(var prop in errors){
    // errors[prop] has what you want now.
}

Hopefully this clears things up.

AngularJS + Laravel 5 Request returns Undefined

1 Answers