Displaying Customer List in a Table with jQuery - Exercise

Contact Us or call 1-877-932-8228
Displaying Customer List in a Table with jQuery - Exercise

Displaying Customer List in a Table with jQuery

Duration: 25 to 35 minutes.

In this exercise, you will use jQuery's ajax method to retrieve a JSON-formatted list of customers from our Northwind database, iterating over the result set to build a table from the returned data. Your page will also send along parameters to ask for the list sorted by a given field and, optionally, filtered by customer names that match a given string.

  1. Navigate to jQuery/Exercises/ from the command line
  2. Type npm install from the command line to install the needed Node.js modules.
  3. Type npm start to start the Node.js server.
  4. Open jQuery/Exercises/server.js and check out the /CustomerList response route:
    • Note that the route accepts a SortOrder GET parameter, defaulting to a value of CompanyName; note that the SQL query passed to the Northwind database sets the ORDER to this value.
    • The route also accepts an optional GET parameter CompanyNameLike which, if present, limits the result set via the clause " WHERE CompanyName LIKE '%" + CompanyNameLike + "%'". If this request parameter is empty, then all customers are returned; if present, then only those customers whose company name contain that string will be returned.
  5. Open jQuery/Exercises/Customers.html in your editor. Edit the call to $.ajax to include the following:
    • The Ajax call should go to the URL CustomerList.
    • Use jQuery's .val() method to pass the value of the CompanyNameLike input field and the value of the selected SortOrder dropdown list.
    • The call should expect to receive a JSON-formatted response.
    • In the done callback, use jQuery's html method to create a table in the div#Contents, and use jQuery's $.each to loop over the JSON results to add a table row for each customer.
  6. Test your solution in a browser by visiting http://localhost:8080/Customers.html
  7. View the solution by navigating on the command line to jQuery/Solutions/, typing npm start, and then visiting http://localhost:8080/Customers.html

Solution:

jQuery/Solutions/Customers.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Exercise</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			$.ajax({
				url: "CustomerList",
				data: {
					SortOrder: $('#SortOrder').val(),
					CompanyNameLike: $('#CompanyNameLike').val()
				},
				dataType: "json"
			}).done(function(data) {
				$('#Content').html('<table><thead><tr><th>Company Name</th><th>Contact Name</th><th>City</th><th>Country</th></tr></table>');
				$.each(data, function(index, element) {
					$('#Content table').append('<tr><td>' + element.CompanyName + '</td><td>' + element.ContactName + '</td><td>' + element.City + '</td><td>' + element.Country + '</td></tr>');
				});
			});
			return false;
		});
	});
</script>
</head>
<body>
	<label for="CompanyNameLike">Company Name Like:</label>
	<br><input type="text" id="CompanyNameLike" placeholder="company name like">
	<br><br>
	<label for="SortOrder">Sort Order:</label>
	<br><select id="SortOrder">
		<option value="CompanyName">Company Name</option>
		<option value="ContactName">Contact Name</option>
		<option value="City">City</option>
		<option value="Country">Country</option>
	</select>
	<br><br>
	<button id="btn">Go</button>
	<hr>
	<div id="Content"></div>
</body>
</html>
Next