restApi/js/main.js

console.clear();
var apiUrl = 'http://helloworld.filonitta.fe.a-level.com.ua:10011/api/v1';
var service = new HttpService(apiUrl);
var selectors = { //переменные
	studentsList: $('#students-list'),
	formUpdate: $('#form-update'),
	btnUpdate: $('#btn-update'),
	formCreateStudent: $('#form-create-student'),
	addField:  $('#addField'),
	delField:  $('#delField'),
	extraFieldsCounter: $('[name="extraFields[]"]').length
};

console.log(service);


service.getAllStudents().done(response => {
response.forEach(students => { 
	$('<a>')
	.addClass('list-group-item')
	.attr('href','#')
	.attr('data-id', students.id)
	.text(`${students.lastname} ${students.firstname}`)
	.appendTo(selectors.studentsList)
});


	console.log(response);
}).fail(error => {});

$(selectors.studentsList).on('click', '[data-id]', function(event) {
	event.preventDefault();
	var studentId = $(this).data('id');
	console.log(studentId);
	service.getStudentById(studentId).done(response => {
		for (let key in response) {
selectors.formUpdate.find(`[name=${key}]`).val(response[key]);
console.log(response.group_id);
		}
if (response.extraFields) {
            response.extraFields.forEach(function(value, i) {
                $('<div class="form-group">').append(
                    $('<input>').attr({
                        'type': 'text',
                        'class': 'form-control',
                        'name': 'extraFields[]',
                        'placeholder': 'Field ' + (i + 1)
                    }).val(value)
                ).appendTo(selectors.formUpdate);
            })
        }
    });


});


selectors.formUpdate.on('submit', function(event) {
	event.preventDefault();

	$('.has-error', this).removeClass('has-error');

	//var data = $(this).serialize();
	var studentId  = $(this).find('[name=id]').val();

	service.updateStudentsById(studentId, $(this).serialize()).done(response => {

	console.log(response);
	
	$(this).find('[name="extraFields[]"]').remove();
        this.reset();	
	
	selectors.studentsList.find(`[data-id=${studentId}]`)
		.text(`${response.lastname} ${response.firstname}`);
	}).fail(response => {

	var response = response.responseJSON;
	var errors = response.errors;
	for (let value of errors) {
	selectors.formUpdate.find(`[name=${value.field}]`).parent().addClass('has-error');
}

	console.log( response );
});      
	
});

//---

$(selectors.addField).on('click', function () {
  $('<div>').addClass('form-group')
      .append($('<input>').attr({
'type': 'text',
            'class': 'form-control',
            'name': 'extraFields[]',
            'placeholder': 'Field ' + ++selectors.extraFieldsCounter,
            'autocomplete': 'off'
            })
                          .addClass('form-control'))
    .appendTo(selectors.formCreateStudent);
});


$(selectors.delField).on('click', function () {
  $(selectors.formCreateStudent).find('[name="extraFields"]').last().remove();
	if(selectors.extraFieldsCounter > 0) {
        selectors.extraFieldsCounter--;
    }
});

$(selectors.formCreateStudent).on('submit', function(event){
  event.preventDefault();
  console.log(data);

  var data = $(this).serialize();
  var studentId = $(this).data('id');
  
  console.log(data);
  
service.postStudentsById(data).done(response => {
        
	$(this).find('[name="extraFields[]"]').remove();
        this.reset();
        selectors.extraFieldsCounter = 0;
	

    $('<a>')
	.addClass('list-group-item')
	.attr('href','#')
	.attr('data-id', studentId)
	.text(`${response.lastname} ${response.firstname}`)
	.appendTo(selectors.studentsList)
      })
    .fail( function (response) {
      var response = response.responseJSON;
      var errors = response.errors;
  
      errors.forEach( function (error) {
        $(this).find('[name="' + error.field + '"]')
          .parent()
          .addClass('has-error');
      });
	response.group_id = 5;
    });
});