RESTfulAPI/js/script.js

var http = new HttpService('http://helloworld.filonitta.fe4.a-level.com.ua/api/v1');
		console.log(http);

var $studentList = $('#students-list');
var $formEditStudent = $('#form-edit-student');
var request = http.getStudents();
var $formCreateStudent = $('#form-create-student');
var $addField = $('#add-field').data('counter', 1);

request.done(function(response){
	console.log(response);
	response.forEach(function(student){
		$('<a href="">')
		.text(student.lastname + ' ' + student.firstname)
		.attr('data-id', student.id)
		.addClass('list-group-item')
		.appendTo($studentList);
	})
});

request.fail(function(error){
	console.log(error);
})

$studentList.on('click', '[data-id]', function(event){
	event.preventDefault();
	var studentId = $(this).data('id');

	$('.has-error', $formEditStudent).removeClass('has-error');
	$('.has-error', $formCreateStudent).removeClass('has-error');
	$formEditStudent.find('[id="extraField"]').remove();

	http.getStudentsById(studentId)
		.done(function(response) { 
		console.log(response);

		if (response.extraField) {
			for(var key in response.extraField) {
				var $extraField = $('<div>').addClass('form-group').appendTo($formEditStudent);;
				var $extraFieldInput = $('<input>')
									.attr({'type': 'text', 'name': 'extraField[' + key + ']', 'id': 'extraField'})
									.val(response.extraField[key])
									.addClass('form-control')
									.appendTo($extraField);
			}
		}

		for(var key in response) {
			$formEditStudent.find('[name="' + key + '"]').val(response[key]);
		}
	})
})

$formEditStudent.on('submit', function(event){
	event.preventDefault();
	var that =this;

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

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

	http.updateUserById(studentId, data)
		.done(function(response){
		$studentList
			.find('[data-id="' + studentId + '"]')
			.text(response.lastname + ' ' + response.firstname);
		})
		.fail(function(response){

			var errors = response.responseJSON.errors;
				errors.forEach(function(error) {
					console.log(error.field);
					console.log(that);
					$(that)
						.find('[name="' + error.field + '"]')
						.parent()
							.addClass('has-error');
				})
		})
})

$formCreateStudent.on('submit', function(event){
	event.preventDefault();
	var data = $(this).serialize();
	var that =this;

	console.log(data);
	
	$('.has-error', this).removeClass('has-error');
	
	http.createStudent(data)
		.done(function(response){
			$('<a href="">')
				.text(response.lastname + ' ' + response.firstname)
				.attr('data-id', response.id)
				.addClass('list-group-item')
				.appendTo($studentList);
		})
		.fail(function(response){	
			var errors = response.responseJSON.errors;
				errors.forEach(function(error) {
					$(that)
						.find('[name="' + error.field + '"]')
						.parent()
							.addClass('has-error');
				})
		})
})

$addField.on('click', function(event){
	var counter = $addField.data('counter');
	$addField.data('counter', counter + 1);

	var $extraField = $('<div>').addClass('form-group').appendTo($formCreateStudent);;
	var $extraFieldInput = $('<input>')
								.attr({'type': 'text', 'name': 'extraField[' + counter + ']', 'placeholder': 'field' + counter})
								.addClass('form-control')
								.appendTo($extraField);

})