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 LearningPractical Learning: Introducing Arrays in jQuery

  1. Start Microsoft Visual Studio
  2. On the main menu of Microsoft Visual Studio, click File -> New -> Project...
  3. In the New Project dialog box, make sure ASP.NET Web Application (.NET Framework) is selected.
    Change the Name to TrafficTicketSystem1
  4. Click OK
  5. In the New ASP.NET Web Application dialog box, click the MVC icon
  6. Press Enter
  7. In the Solution Explorer, right-click Content -> Add -> Style Sheet
  8. Type TrafficTicketSystem as the name of the file
  9. Click Add
  10. Create the following styles in the document:
    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;}
  11. In the Solution Explorer, under Views, expand Shared and double-click _Layout.cshtml
  12. Change the document as follows:
    <!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">&copy; @DateTime.Now.Year - Traffic Ticket System</p>
            </footer>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
  13. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  14. Type Drivers as the name of the file
  15. Press Enter

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 LearningPractical Learning: Creating an Array of Values

  1. In the empty document, type the following code to create an array:
    var driver = ['297-083-4151', 'Henry', 'Rigby', '7927 Hedgehull Drv', 'Beaver Springs', 'Snyder', 'PA', '17832-1055' ];
  2. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  3. In the Add Scaffold dialog box, click MVC 5 Controller - Empty
  4. Click Add
  5. Type Drivers to get DriversController
  6. Click Add
  7. In the class, add an action method named Details:
    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();
            }
        }
    }
  8. In the document, right-click inside the Details() method and click Add View...
  9. In the Add View dialog box, make sure the View Name text box displays Details. Click Add

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 LearningPractical Learning: Accessing an Array of Values

  1. Change the document as follows:
    @{
        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>&nbsp;</td>
                    <td>&nbsp;</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>
  2. To execute the application, on the main menu, click Debug and click Start Without Debugging:

    Introducing Interfaces

  3. Close the browser and return to your programming environment

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>&nbsp;</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:

Accessing the Members of an Array

Accessing the Members of an Array

Accessing the Members of an Array

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 Length of an Array

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:

Access to Members of a Jagged Array

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:

Adding an Element to an Array

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 LearningPractical Learning: Introducing Arrays of Objects

  1. Click Drivers.js tab to access the file and change it as follows:
    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' } ];
  2. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  3. Type Cameras as the name of the file
  4. Click Add
  5. Create an array of objects as follows:
    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' } ];
  6. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  7. Type Violations as the name of the file
  8. Create an array as follows:
  9. 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 }
    ];
  10. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  11. In the Add Scaffold dialog box, click MVC 5 Controller - Empty and click Add
  12. Type Cameras to get CamerasController
  13. Click Add
  14. In the document, right-click Index and click Add View...
  15. In the Add View dialog box, make sure the View Named text box displays Index and click Add

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:

Updating an Element

You can also use any of the JavaScript loop operators (while, do...while, for(int), or for(value)).

Practical LearningPractical Learning: Looping Through an Array

  1. Change the document as follows:
    @{
        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>
  2. To execute, press Ctrl + F5

    Geometry - Pentagon

  3. Close the browser and return to your programming environement
  4. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  5. In the Add Scaffold dialog box, click MVC 5 Controller - Empty and click Add
  6. Type Violations to get ViolationsController
  7. Press Enter
  8. In the document, right-click Index and click Add View...
  9. In the Add View dialog box, make sure the View Name text box displays Index. Click Add

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 LearningPractical Learning: Visiting Each Element of an Array

  1. Change the document as follows:
    @{
        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>
  2. To execute, press Ctrl + F5

    Geometry - Pentagon

  3. Close the browser and return to your programming environment
  4. Click the ViolationsController.cs tab to access it
  5. In the class, create an action method named Get:
    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();
            }
        }
    }
  6. In the documment, right-click inside the Get() method and click Add View...
  7. In the Add View dialog box, make sure the View Name text box displays Get. Click Add

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 LearningPractical Learning: Locating an Object in an Array

  1. Change the document as follows:
    @{
        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>
  2. To execute the application, on the main menu, click Debug and click Start Without Debugging:

    Locating an Object in an Array

  3. Click the Find Violation button:

    Locating an Object in an Array

  4. In the Violation # text box, type 3
  5. Close the browser and return to your programming environment
  6. Close your programming environment

Previous Copyright © 2018-2019, FunctionX Next