Introduction to Arrays
Introduction to Arrays
Fundamentals of Arrays in jQuery
Introduction
As a library, jQuery primarily follows JavaScript techniques of creating and managing arrays. The library adds some features to make using arrays easier and adapted to the library.
Practical Learning: Introducing Arrays in jQuery
body {
background-color: white;
}
.bold { font-weight: 600; }
.centered { text-align: center; }
.small-size { width: 100px; }
.medium-size { width: 150px; }
.large-size { width: 400px; }
.tbl-contents { margin: auto;
width: 550px; }
.navbar-inverse {
background-color: #0a1d90;
border-bottom: 5px solid black;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:link {
color: lightblue;
background-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: white;
background-color: transparent;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Traffic Ticket System</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/TrafficTicketSystem.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Traffic Ticket System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Owners/Drivers Issues", "Index", "Home")</li>
<li>@Html.ActionLink("Tickets Management", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p class="text-center">© @DateTime.Now.Year - Traffic Ticket System</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>Creating an Array of Values
If you want to start with an empty array, declare a variable and assign empty square brackets to it. If you want to create an array that doesn't (yet) have elements, leave the square brackets empty. Here is an example:
$(document).ready(function () {
var items = [];
});
To create an array of a single item, include that item in the square brackets. The item can be a number, a string, a Boolean value, etc. Here are examples:
$(document).ready(function () {
var quantity = [250];
var item = ["Blue Dress"];
var applyDiscount = [true];
});
To create an array that contains many items, the formula to use in a jQuery code is the same used in JavaScript:
var variable-name = [eleament_1, eleament_2], ..., eleament_n];
Here is an example:
$(document).ready(function () {
var items = ["Blue Dress", 'Khaki Pants'];
});
An element of an array is undefined it its value is not known. As seen in JavaScript, to create such an element, leave its placeholder empty. Here is an example:
$(document).ready(function () {
var title = [ "Absence", , "Malice" ];
});
Practical Learning: Creating an Array of Values
var driver = ['297-083-4151', 'Henry', 'Rigby', '7927 Hedgehull Drv', 'Beaver Springs', 'Snyder', 'PA', '17832-1055' ];
using System.Web.Mvc;
namespace TrafficTicketSystem1.Controllers
{
public class DriversController : Controller
{
// GET: Drivers
public ActionResult Index()
{
return View();
}
// GET: Drivers/Details
public ActionResult Details()
{
return View();
}
}
}Accessing an Array of Values
As seen in JavaScript, to access the whole array as an object, use its name. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Department Store</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var items = [ "Blue Dress", 'Khaki Pants', "Yellow Fedora" ];
$("#items").html(items);
});
</script>
<h1>Department Store</h1>
<p id="items"></p>
</body>
</html>
To access an item of the array, apply the square brackets to the variable and pass the desired index to square brackets.
Practical Learning: Accessing an Array of Values
@{
ViewBag.Title = "Traffic Tickets Management - Vehicle Driver Review";
}
<h2 class="text-center blue common-font bold">Traffic Tickets Management</h2>
<h3 class="text-center blue common-font bold">Vehicle Owner/Driver</h3>
<div class="tbl-contents common-font">
<form name="VehicleDriver">
<table>
<tr>
<td class="small-size bold">Driver's Lic. #:</td>
<td><input type="text" id="drvLicNbr" class="form-control medium-size" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<table>
<tr>
<td class="small-size bold">First Name:</td>
<td><input type="text" id="firstName" class="form-control medium-size" /></td>
<td class="small-size bold indent-left">Last Name:</td>
<td><input type="text" id="lastName" class="form-control medium-size" /></td>
</tr>
</table>
<table>
<tr>
<td class="bold small-size">Address:</td>
<td><input type="text" id="adrs" class="form-control large-size" /></td>
</tr>
</table>
<table>
<tr>
<td class="small-size bold">City:</td>
<td><input type="text" id="ct" class="form-control medium-size" /></td>
<td class="small-size bold indent-left">County:</td>
<td><input type="text" id="county" class="form-control medium-size" /></td>
</tr>
<tr>
<td class="bold">State:</td>
<td><input type="text" id="state" class="form-control medium-size" /></td>
<td class="bold indent-left">ZIP Code:</td>
<td><input type="text" id="zip" class="form-control medium-size" /></td>
</tr>
</table>
</form>
</div>
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/Drivers.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ct").val(driver[4]);
$("#zip").val(driver[7]);
$("#adrs").val(driver[3]);
$("#state").val(driver[6]);
$("#county").val(driver[5]);
$("#lastName").val(driver[2]);
$("#firstName").val(driver[1]);
$("#drvLicNbr").val(driver[0]);
});
</script>
Element Selection and Arrays
Getting an Element by Position
Imagine you have many elements with the same HTML tag name in a webpage. If you make a selection by their HTML tag names or a style they share, you will get an array (or a collection) of elements. To access the elements by their positions, apply the square brackets to the selection. In the square brackets, enter the index of the element you want to access.
Selecting an Element by its Attribute
When creating an HTML element, you can give it an identifier and/or a name. jQuery allows you to select the element based one of these attributes. The formula to use is:
$("html-tag[name-or-id=identifier"])
In the double-quotes of the jQuery object, start with the HTML name of the tag of the element you want to access. This is followed by square brackets. In the square brackets, if you will access the element by its name, type name=''. If you will access the element by its identifier, type id=''. In the single-quotes, type the value that was given to the name or to the id attribute. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Department Store</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("h1[name='main-title']").html("Employment Application");
$("input[id='btnShowFullName']").click(function (event) {
var name = $("input[id='firstName']").val();
var family = $("input[name='familyName']").val();
var complete = name + " " + family;
$("span[id='fullName']").html(complete);
});
});
</script>
<h1 name="main-title" class="empl-rec"></h1>
<form name="EmploymentApplication" method="get">
<table>
<tr>
<td><label for="firstName">First Name:</label></td>
<td><input id="firstName" type="text" /></td>
</tr>
<tr>
<td><label for="lastName">Last Name:</label></td>
<td><input id="lastName" type="text" name="familyName" /></td>
</tr>
<tr>
<td> </td>
<td><input id="btnShowFullName" type="button"value="Show Full Name" /></td>
</tr>
<tr>
<td><label>Full Name:</label></td>
<td><span id="fullName"></span></td>
</tr>
</table>
</form>
</body>
</html>
Here is an example of using the webpage:
The Size of a Selection
If you make a selection or combine selections of elements in jQuery, to let you get the number of items in the selection, the jQuery object is equipped with a property named length.
Primary Characteristics and Operations on Arrays
Introduction
As mentioned already, JavaScript provides the Array class to assist you in creating and managing arrays. As a result, all of the operations we reviewed for an array are available. These include adding a value, removing a value, replacing a value, increasing the size of an array, etc.
As mentioned in JavaScript, to help you know the number of elements of an array, the Array object is equipped with the length property.
Iterating Through an Array
As seen in JavaScript, you can use a while loop^to visit each member of an array. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Thai Food</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var i = 0;
var thaiFood = ['Yum Neau', "Roti Kanai w/Yellow Curry Chicken",
'Curry Puffs', "Tom Kha Soup", 'Shrimp Bikini'];
while (i < 5) {
$("#food").append("<li>" + thaiFood[i] + "</li>");
i++;
}
});
</script>
<h1>Thai Food</h1>
<ul id="food"></ul>
</body>
</html>
In the same way, you can use a do...while loop on an array. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DC Comics Characters</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
var characters = ['Superman', 'Green Lantern', 'Batman',
'Wonder Woman', 'The Flash', 'Aquaman'];
do {
$("#cyborg").append("<li>" + characters[counter] + '</li>');
counter++;
} while (counter < characters.length);
});
</script>
<h1>DC Comics Characters</h1>
<ul id="cyborg"></ul>
</body>
</html>
You can also use a for loop, To let you access each element of an array, the jQuery object is equipped with an overloaded method named each. This method has two versions. Both deal with arrays one way or another. One of the syntaxes of the jQuery.each() method is as follows:
jQuery.each(array, callback-function);
The first argument is an array. It can be an array created in the first argument. The second argument is a callback function that will process the array. The callback function takes two arguments. The first argument is the index of the element that is currently being processed. The second argument is the value or object at that index. Here is an example of calling this method:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<style type="text/css">
.centered { text-align: center; }
</style>
</head>
<body>
<h1 id="topTitle" class="centered"></h1>
<h2 class="centered">Expectations</h2>
<ul id="results">
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("h1.centered").html("Diagnostic Classifications");
$.each(["What was supposed to happen happened.",
"What was supposed to happen did not happened.",
"What was not supposed to happen happened.",
"What was not supposed to happen did not happened."],
function (index, value) {
$("<li>").html(value).appendTo($("#results"));
}
);
});
</script>
</body>
</html>
This would produce:
The first argument can also be a variable that holds an array. The other version of the jQuery.each() method used the following syntax:
jQuery.each(object, callback-function);
This time, the first argument is an object. Remember that an object in JavaScript is just a type of array. The second argument is a function to process the array. You can first create an object stored in a variable and then pass that variable as the first argument. Here is an example:
$(document).ready(function () {
$("h1.centered").html("Diagnostic Classifications");
var diagnosis = {
tp: "What was supposed to happen happened.",
tn: "What was supposed to happen did not happened.",
fp: "What was not supposed to happen happened.",
fn: "What was not supposed to happen did not happened."
};
$.each(diagnosis,
function (index, value) {
$("<li>").html(value).appendTo($("#results"));
}
);
});
You can also create the object directly in the first argument placeholder.
Finding an Element in an Array
To let you look for an item in an array, the $ namespace is equipped with a method named inArray. Its syntax is:
int jQuery.inArray(value, array [, fromIndex]);
This method takes two required and one optional argument. The second argument is the array that holds the values. The first argument is the value to find in the array. If the interpreter finds the value in the array, the method returns 0. If there is no such value in the array, the method returns -1.
By default, the jQuery.inArray() method starts searching from the first item in the array. If you want to start from a position of your choice, pass a third argument as the intended 0-based position.
Replacing One Array with Another
To let you replace the elements of one array with those of another array, the jQuery object is equipped with a method named extend. Its syntax is:
jQuery.extend(target, [array1/object1], [array2/object2]);
This method takes one required and two optional arguments. The required argument can be an empty array or an empty object. The second argument is an object that has the properties you want to copy in the target array or object. The second argument can also be an array that holds some value. If the jQuery.extend() is called, the members of the second argument will be put in the first argument. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<style type="text/css">
.centered { text-align: center; }
</style>
</head>
<body>
<h1 id="topTitle" class="centered"></h1>
<h2 class="centered">Expectations</h2>
<p id="results">Results</p>
<script type="text/javascript">
$(document).ready(function () {
$("h1.centered").html("Diagnostic Classifications");
var target = [];
var diagnoses = ["What was supposed to happen happened.",
"What was supposed to happen did not happened.",
"What was not supposed to happen happened.",
"What was not supposed to happen did not happened."];
var result = $.extend(target, diagnoses);
$("#results").html(result);
});
</script>
</body>
</html>
This would produce:
The first argument can be an array that contains some elements or an object that has some members. In this case, the jQuery.extend() method would replace the items of the first argument by those of the second argument. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<style type="text/css">
.centered { text-align: center; }
</style>
</head>
<body>
<h1 id="topTitle" class="centered"></h1>
<h2 class="centered">Expectations</h2>
<p id="t">Results</p>
<p id="f">Results</p>
<p id="results">Results</p>
<script type="text/javascript">
$(document).ready(function () {
$("h1.centered").html("Diagnostic Classifications");
var t = ["What was supposed to happen happened.", "What was supposed to happen did not happened."];
$("#t").html(t);
var f = ["What was not supposed to happen happened.", "What was not supposed to happen did not happened."];
$("#f").html(f);
var result = $.extend(t, f);
$("#results").html(result);
});
</script>
</body>
</html>
This would produce:
If you want to add more items to the target array/object, pass a third argument that contains those extra items.
jQuery and Strings
Introduction
Besides the method of the JavaScript String object, the $ namespace provides various methods to manage objects and strings in jQuery code.
Removing Sides Empty Spaces
If you have a string that has empty spaces on its left and right sides, if you want to remove those empty, the $ namespace is equipped with a method named trim.
Adding Strings
jQuery supports characters and strings additions as done in both JavaScript and C#, which is done using the + operator. The jQuery library provides more options in both the $ namespace and the jQuery object.
As you may know already, to select an object on a webpage, you can use the jQuery object. To add a character or string to the left side of an existing character or string, you can call the prepend() of the jQuery object. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var origin = "Ecma";
$("#standard").prepend(origin);
});
</script>
<h1>Exercise</h1>
<p id="standard">Script</p>
</body>
</html>
To add a character or a string on the right side of the value of a selected element, call the $().append() method. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Development</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var writing = "Script";
$("#standard").append(writing);
});
</script>
<h1>Web Development</h1>
<p id="standard">Java</p>
</body>
</html>
Arrays and Objects in jQuery
Introduction
Once again, jQuery primarily uses arrays as in JavaScript. Arrays of objects are a little different from arrays of primitive types because an object in an array of objects can contain regular values as properties, methods, other internal arrays, and/or internal arrays.
To create an array of objects, declare a variable, initialize it with square brackets and create each object in the square brackets, all of this as done in JavaScript.
All the methods of the Array class are available. For example, you can call the Array.push() method to add an object to an existing array.
Practical Learning: Introducing Arrays of Objects
var drivers = [
{ drvLicNbr: '297-083-4151', firstName: 'Henry', lastName: 'Rigby', address: '7927 Hedgehull Drv', city: 'Beaver Springs', county: 'Snyder', state: 'PA', zipCode: '17832-1055' },
{ drvLicNbr: 'C-684-394-527', firstName: 'Sarah', lastName: 'Cuchchran', address: '10804 Euton Rd', city: 'Shawnee Land', county: '', state: 'VA', zipCode: '22602-6628' },
{ drvLicNbr: '403-8037-588', firstName: 'Daniel', lastName: 'Cohn', address: '418 Pearl Str', city: 'Jones Springs', county: 'Berkeley', state: 'WV', zipCode: '25427-1717' },
{ drvLicNbr: 'L-927-592-749', firstName: 'Kimberly', lastName: 'Leech', address: '7026 Warrengton Ave', city: 'Riddlesburg', county: 'Bedford', state: 'PA', zipCode: '16672-2739' } ];var cameras = [
{ cameraNbr: 409405, make: 'Davis Unity', model: 'TN-9724', location: 'Paragon Ave and Liberty Hwy' },
{ cameraNbr: 950724, make: 'Davis Unity', model: 'HL-3680', location: 'Dixon Rd and Washita Str' },
{ cameraNbr: 597596, make: 'Wallies Bros', model: 'KMD2020', location: 'Red Vallely Str and Bartholow Str' },
{ cameraNbr: 395071, make: 'Kinsman', model: 'DRVP6', location: 'Stuffer Blvd and Buffington Ave' },
{ cameraNbr: 730485, make: 'Davis Unity', model: 'TN-9724', location: 'Paragon Ave and Putman Rd' },
{ cameraNbr: 485082, make: 'Wallies Bros', model: 'KMR4040', location: 'Rockland Way and Grey Farms Str' } ];var violations = [
{ violationNbr: 1, cameraNbr: 950724, drvLicNbr: 'L-927-592-749', violationDate: '04/18/2018', violationTime: '10:44', category: 'Red Light', photoAvailable: false, videoAvailable: true, ticketAmount: 125 },
{ violationNbr: 2, cameraNbr: 730485, drvLicNbr: 'C-684-394-527', violationDate: '05/02/2018', violationTime: '14:27', category: 'Speed', photoAvailable: true, videoAvailable: false, ticketAmount: 75 },
{ violationNbr: 3, cameraNbr: 409405, drvLicNbr: '403-8037-588', violationDate: '04/30/2018', violationTime: '22:19', category: 'Red Light', photoAvailable: true, videoAvailable: true, ticketAmount: 150 },
{ violationNbr: 4, cameraNbr: 950724, drvLicNbr: 'L-927-592-749', violationDate: '04/21/2018', violationTime: '08:36', category: 'Red Light', photoAvailable: false, videoAvailable: true, ticketAmount: 85 },
{ violationNbr: 5, cameraNbr: 597596, drvLicNbr: '297-083-4151', violationDate: '04/18/2018', violationTime: '10:58', category: 'Speed', photoAvailable: true, videoAvailable: true, ticketAmount: 65 },
{ violationNbr: 6, cameraNbr: 409405, drvLicNbr: 'C-684-394-527', violationDate: '04/30/2018', violationTime: '23:45', category: 'Red Light', photoAvailable: true, videoAvailable: true, ticketAmount: 150 }
];
Accessing an Object of the Array
To access an object that belongs to an array of objects, you have various options. As done in JavaScript, you can access an object using its index. From there, you can access each of its members using the period operator. Here are examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Water Distribution Company</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-center">Water Distribution Company</h1>
<h2 class="text-center">Water Meter</h2>
<div align="center">
<form name="WaterMember" method="get">
<table>
<tr>
<td><label>Meter #:</label></td>
<td><input type="text" name="meterNumber" class="form-control" /></td>
</tr>
<tr>
<td><label>Make:</label></td>
<td><input type="text" name="make" class="form-control" /></td>
</tr>
<tr>
<td><label>Model:</label></td>
<td><input type="text" name="model" class="form-control" /></td>
</tr>
<tr>
<td><label>Meter Size:</label></td>
<td><input type="text" name="meterSize" class="form-control" /></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function () {
var waterMeters = [
{ meterNumber: '293-740', make: 'Breston', model: 'S-93749', meterSize: '3/4 Inches' },
{ meterNumber: '820-418', make: 'Vashty Worldwide', model: 'DD-3840', meterSize: '3/4 Inches' },
{ meterNumber: '627-425', make: 'Breston', model: 'T-39478', meterSize: '5/8 Inches' },
{ meterNumber: '304-861', make: 'Vashty Worldwide', model: 'DD-3840', meterSize: '3/4 Inches' }
];
$("input[name='meterNumber']").val(waterMeters[1].meterNumber);
$("input[name='make']").val(waterMeters[1].make);
$("input[name='model']").val(waterMeters[1].model);
$("input[name='meterSize']").val(waterMeters[1].meterSize);
});
</script>
</body>
</html>
This would produce:
You can also use any of the JavaScript loop operators (while, do...while, for(int), or for(value)).
Practical Learning: Looping Through an Array
@{
ViewBag.Title = "Traffic Tickets Management - Traffic Cameras";
}
<h2 class="text-center blue common-font bold">Traffic Tickets Management</h2>
<h3 class="text-center blue common-font bold">Traffic Cameras</h3>
<div class="tbl-cameras common-font">
<table class="table table-striped">
<tr>
<td class="bold">Camera #</td>
<td class="bold">Make</td>
<td class="bold">Model</td>
<td class="bold">Location</td>
</tr>
</table>
</div>
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/Cameras.js"></script>
<script>
$(document).ready(function () {
for (var viewer in cameras) {
$(".table-striped").append("<tr><td>" + cameras[viewer].cameraNbr + "</td>" +
"<td>" + cameras[viewer].make + "</td>" +
"<td>" + cameras[viewer].model + "</td>" +
"<td>" + cameras[viewer].location + "</td></tr>");
}
});
</script>
Visiting Each Element of an Array in jQuery
In jQuery, to visit the objects of an array, you can call the $.each() method. Remember that it takes a function as its second argument. In this case, the second argument of that function is the object that is current being accessed. The first argument of that function is the index of the current object.
Practical Learning: Visiting Each Element of an Array
@{
ViewBag.Title = "Traffic Tickets Management - Traffic Violations";
}
<h2 class="text-center">Traffic Tickets Management - Traffic Violations</h2>
<table class="table table-striped">
<tr>
<td class="bold">Violation #</td>
<td class="bold">Camera #</td>
<td class="bold">Drv. Lic. #</td>
<td class="bold">Violation Date</td>
<td class="bold">Violation Time</td>
<td class="bold">Violation Type</td>
<td class="bold">Photo Available</td>
<td class="bold">Video Available</td>
<td class="bold">Ticket Amount</td>
</tr>
</table>
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/Violations.js"></script>
<script>
$(document).ready(function () {
$.each(violations, function (index, violation) {
var photo = 'No', video = 'No';
if (violation.photoAvailable == true)
photo = 'Yes';
if (violation.videoAvailable == true)
video = 'Yes';
$(".table-striped").append("<tr><td class='text-center'>" + violation.violationNbr + "</td>" +
"<td class='text-center'>" + violation.cameraNbr + "</td>" +
"<td>" + violation.drvLicNbr + "</td>" +
"<td>" + violation.violationDate + "</td>" +
"<td class='text-center'>" + violation.violationTime + "</td>" +
"<td>" + violation.category + "</td>" +
"<td class='text-center'>" + photo + "</td>" +
"<td class='text-center'>" + video + "</td>" +
"<td class='text-center'>" + violation.ticketAmount + "</td></tr>");
});
});
</script>
using System.Web.Mvc;
namespace TrafficTicketSystem11.Controllers
{
public class ViolationsController : Controller
{
// GET: Violations
public ActionResult Index()
{
return View();
}
// GET: Violations/Get
public ActionResult Get()
{
return View();
}
}
}Locating an Object in an Array
One of the routine operations you perform on an array (or any collection) is to look for an object. We saw that, to assist you with this, JavaScript provides loops (while, do...while, for(int), and for(object))). You can use any of them.
Practical Learning: Locating an Object in an Array
@{
ViewBag.Title = "Traffic Tickets Management - Traffic Violations";
}
<h2 class="text-center blue common-font bold">Traffic Tickets Management</h2>
<h3 class="text-center blue common-font bold">Traffic Violations</h3>
<table class="table table-striped common-font">
<tr>
<td class="bold">Violation #</td>
<td class="bold">Camera #</td>
<td class="bold">Drv. Lic. #</td>
<td class="bold">Violation Date</td>
<td class="bold">Violation Time</td>
<td class="bold">Violation Type</td>
<td class="bold">Photo Available</td>
<td class="bold">Video Available</td>
<td class="bold">Payment Amount</td>
</tr>
</table>
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/Violations.js"></script>
<script>
$(document).ready(function () {
$.each(violations, function (index, violation) {
var photo = 'No', video = 'No';
if (violation.photoAvailable == true)
photo = 'Yes';
if (violation.videoAvailable == true)
video = 'Yes';
$(".table-striped").append("<tr><td class='text-center'>" + violation.violationNbr + "</td>" +
"<td class='text-center'>" + violation.cameraNbr + "</td>" +
"<td>" + violation.drvLicNbr + "</td>" +
"<td>" + violation.violationDate + "</td>" +
"<td class='text-center'>" + violation.violationTime + "</td>" +
"<td>" + violation.category + "</td>" +
"<td class='text-center'>" + photo + "</td>" +
"<td class='text-center'>" + video + "</td>" +
"<td class='text-center'>" + violation.ticketAmount + "</td></tr>");
});
});
</script>
|
|
||
| Previous | Copyright © 2018-2022, FunctionX | Next |
|
|
||