JS get table

Author: gerardpuigl

src/main/java/com/itacademy/CrudEmpleats/controller/ControllerEmployees.java

@@ -29,35 +29,35 @@ void start(HttpServletResponse reponse) throws IOException {
 	}*/
 
 	// Crear nou empleat
-	@PostMapping( "/EmpleatList")
+	@PostMapping( "/EmployeeList")
 	@ResponseStatus(HttpStatus.CREATED)  // 201
 	public void addEmployee(@RequestBody Employee employee) {
 		repositori.addEmployee(employee);
 
 	}
 
 	// Retorna una llista JSon d'empleats
-	@GetMapping("/EmpleatList")
+	@GetMapping("/EmployeeList")
 	public List<Employee> allEmployees() {
 		return repositori.getAllEmployees();
 	}
 
 	// Busca un empleat per Id
-	@GetMapping("/EmpleatList/{id}")
+	@GetMapping("/EmployeeList/{id}")
 	public Employee getFirstEmployee(@PathVariable("id") int id) {
 			return repositori.getEmployeeById(id);
 	}
 
 	// Actualitzar Empleat
-	@PutMapping("/EmpleatList/{id}")
+	@PutMapping("/EmployeeList/{id}")
 	@ResponseStatus(HttpStatus.ACCEPTED)  // 202
 	public Employee updateEmployee(@RequestBody Employee employee, @PathVariable("id") int id) {
 		repositori.updateEmployee(employee,id);
 		return repositori.getEmployeeById(id);
 	}
 
 	// Eliminar Empleat
-	@DeleteMapping("/EmpleatList/{id}")
+	@DeleteMapping("/EmployeeList/{id}")
 	@ResponseStatus(HttpStatus.ACCEPTED)  // 202
 	public String deleteEmployee(@PathVariable("id") int id) {
 			repositori.deleteEmployee(id);

src/main/resources/static/index.js

@@ -1,16 +1,39 @@
 
-    $(document).ready(function () {
-        $('#newEmployee').submit(function (evento) {
-            $.ajax({
-                url: '/EmpleatList',
-                type: 'POST',
-                data: JSON.stringify({
-                    "name": $('#name').val(),
-                    "job": $('#job').val()
-                }),
-                processData: false,
-                contentType: "application/json"
-            })
-            evento.preventDefault();
-        });
-    });
+$(document).ready(function() {
+	$('#newEmployee').submit(function(evento) {
+		evento.preventDefault();
+		$.ajax({
+			url: '/EmployeeList',
+			type: 'POST',
+			data: JSON.stringify({
+				"name": $('#name').val(),
+				"job": $('#job').val()
+			}),
+			processData: false,
+			contentType: "application/json"
+		})
+		updateTable()
+	});
+
+	$(function() {
+		updateTable();
+	});
+
+	function updateTable() {
+		$.get("/EmployeeList", function(data) {
+			$('#employeeTable > tbody').empty()
+			$.each(data, function(i, employee) {
+				var tblRow = "<tr>" +
+					"<td>" + employee.id + "</td>" +
+					"<td>" + employee.name + "</td>" +
+					"<td>" + employee.job + "</td>" +
+					"<td>" + employee.salary + "</td>" +
+					"<td>" +
+					"<button type=submit>Modificar</button>" +
+					"<button type=submit>Eliminar</button>" +
+					"</td>"
+				$(tblRow).appendTo("#employeeTable tbody");
+			});
+		});
+	};
+});

src/main/resources/templates/index.html

@@ -17,29 +17,19 @@ <H4>Empleats</H4><button type="submit">Nou Empleat</button>
 	</div>
 	<div>
 		<table id="employeeTable" border="1">
-			<tr>
-				<th>#</th>
-				<th>Nom</th>
-				<th>Càrreg</th>
-				<th>Salari</th>
-				<th>Accions</th>
-			</tr>
-			<tbody>
+			<thead>
 				<tr>
-					<th>0</th>
-					<td>Gerard</td>
-					<td>Programador Junior</td>
-					<td>puiglatorre@gmail.com</td>
-					<td>
-						<button type="submit">Modificar</button>
-						<button type="submit">Eliminar</button>
-					</td>
+					<th>#</th>
+					<th>Nom</th>
+					<th>Càrreg</th>
+					<th>Salari</th>
+					<th>Accions</th>
 				</tr>
-
+			</thead>
+			<tbody>
 			</tbody>
 		</table>
 	</div>
-	</div>
 	<div class="container"></div>
 	<div>
 		<H4>Crear Empleat</H4>
@@ -65,7 +55,7 @@ <H4>Crear Empleat</H4>
 				<div>
 					<br><br>
 					<input type=submit name="submit" value="Afegir">
-					<input type=reset  value="Cancellar">
+					<input type=reset value="Cancellar">
 				</div>
 			</form>
 		</div>