JavaScript arrays work like arrays in most other programming languages. Listing 5-32 shows how you can create and populate an array.
Listing 5-32. Creating and Populating an Array in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myArray = new Array();
myArray[0] = 100;
myArray[l] = “Adam”;
myArray[2] = true;
</script>
</head>
<body>
This is a simple example
</body>
</html>
I have created a new array by calling new Array(). This creates an empty array, which I assign to the variable myArray. In the subsequent statements, I assign values to various index positions in the array. (There is no console output from this listing.)
There are a couple of things to note in this example. First, I didn’t need to declare the number of items in the array when I created it. JavaScript arrays will resize themselves to hold any number of items. The second point is that I didn’t have to declare the data types that the array will hold. Any JavaScript array can hold any mix of data types. In the example, I have assigned three items to the array: a number, a string, and a boolean.
1. Using an Array Literal
The array literal style lets you create and populate an array in a single statement, as shown in Listing 5-33.
Listing 5-33. Using the Array Literal Style in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myArray = [100, “Adam”, true];
</script>
</head>
<body>
This is a simple example
</body>
</html>
In this example, I specified that the myArray variable should be assigned a new array by specifying the items I wanted in the array between square brackets ([ and ]). (There is no console output from this listing.)
2. Detecting an Array
AngularJS provides the angular.isArray method, which returns true if the argument it is called with is an array, as illustrated by Listing 5-34.
Listing 5-34. Detecting Arrays in the jsdemo.html File
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
console.log(angular.isArray([100, “Adam”, true]));
console.log(angular.isArray(“Adam”));
console.log(angular.isArray(23));
</script>
</head>
<body>
This is a simple example
</body>
</html>
This example produces the following console output:
true
False
False
3. Reading and Modifying the Contents of an Array
You read the value at a given index using square braces ([ and ]), placing the index you require between the braces, as shown in Listing 5-35.
Listing 5-35. Reading the Data from an Array Index in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myArray = [100, “Adam”, true];
console.log(“Index 0: ” + myArray[0]);
</script>
</head>
<body>
This is a simple example
</body>
</html>
You can modify the data held in any position in a JavaScript array simply by assigning a new value to the index. Just as with regular variables, you can switch the data type at an index without any problems. The output from the listing is as follows:
Index 0: 100
Listing 5-36 demonstrates modifying the contents of an array.
Listing 5-36. Modifying the Contents of an Array in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myArray = [100, “Adam”, true];
myArray[0] = “Tuesday”;
console.log(”Index 0: ” + myArray[0]);
</script>
</head>
<body>
This is a simple example
</body>
</html>
In this example, I have assigned a string to position 0 in the array, a position that was previously held by a number and produces this output:
Index 0: Tuesday
4. Enumerating the Contents of an Array
You enumerate the content of an array using a for loop or the AngularJS angular.forEach method, both of which are demonstrated in Listing 5-37.
Listing 5-37. Enumerating the Contents of an Array in the jsdemo.html File
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myArray = [100, “Adam”, true];
for (var i = 0; i < myArray.length; i++) {
console.log(“Index ” + i + “: ” + myArray[i]);
}
console.log(“—“);
angular.forEach(myArray, function (value, key) {
console.log(key + ”: ” + value);
};
</script>
</head>
<body>
This is a simple example
</body>
</html>
The JavaScript for loop works just the same way as loops in many other languages. You determine how many elements there are in the array by using the length property. The angular.forEach method doesn’t require array bounds to work but doesn’t provide the index of the currently array item. The output from the listing is as follows:
Index 0: 100
Index 1: Adam
Index 2: true
—
0: 100
1: Adam
2: true
5. Using the Built-in Array Methods
The JavaScript Array object defines a number of methods that you can use to work with arrays. Table 5-6 describes the most useful of these methods.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.