Can't read responseJSON value in ajax request - php

Question

This is the view :
{{ Form::open([
'url' => '/contacts/create',
'files' => true
])}}
<div class="row">
<div class="collapse" id="collapseExample">
<div class="col-md-9">
{{ Form::label('group', 'group name')}}
{{ Form::text('group', null, [
'placeholder' => 'Enter group name here',
'class' => 'form-control'
])}}
</div>
<div class="col-md-3">
<button id="add-new-btn" class="btn btn-success"><i class="pe-7s-add-user"></i> Add</button>
</div>
</div>
</div>
{{ Form::close() }}
in my that view i have this script
$("#add-new-btn").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var newGroup = $('#group');
$.ajax({
url: "/groups/autocomplete",
method: "post",
data: {
name: $("#group").val(),
_token: $("input[name=_token]").val()
},
success: function(response) {
console.log(response);
},
error: function(xhr) {
var errors = xhr.responseJSON;
var error = errors.name[0];
if(error) {
newGroup.addClass('has-error');
var inputGroup = newGroup.closest('.col-md-9');
inputGroup.next('text-danger').remove();
inputGroup
.find('input')
.after('<p class="text-danger">' + error + '</p>');
}
}
});
});
and in store method of GroupsController i have a simple Validator that may returns these 2 values:
1.The name field is required
2.The name has already been taken
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|unique:groups'
]);
}
Now the problem is this :
Every time i try to submit the form, the browser returns this error "errors.name is undefined" in console.
where is the problem?

Answer 1

i had a mistake for accessing property of object, jsonData.errors
var data = xhr.responseText;
var jsonData = JSON.parse(data);
var msg = jsonData.errors.name[0];
console.log(msg);
or
var jsonData = xhr.responseJSON;
var msg = jsonData.errors.name[0];
console.log(msg);