JAVASCRIPT ARRAY METHODS

An array is a kind of object. All arrays have the methods listed below; their property names are index numbers. You will often see arrays used to store complex data (including other objects).

Each item in an array is sometimes called an element. It does not mean that the array holds HTML elements; element is just the name given to the pieces of information in the array. *Note some methods only work in IE9+.

JQUERY METHODS FOR FILTERING & SORTING

jQuery collections are array-like objects representing DOM elements. They have similar methods to an array for modifying the elements. You can use other jQuery methods on the selection once they have run.

In addition to the jQuery methods shown below, you may see animation methods chained after filtering and sorting methods to create animated transitions as the user makes a selection.

SUPPORTING OLDER BROWSERS

Older browsers do not support the latest methods of the Array object. But a script called the ECMAScript 5 Shim can reproduce these methods. ECMAScript is the standard that modern JavaScript is based upon.

ECMAScript is the official name for the standardized version of JavaScript, although most people still call it JavaScript unless they are discussing new features.

ECMA International is a standards body that looks after the language, just like the W3C looks after HTML and CSS. And, browser manufacturers often add features beyond the ECMA specs (just as they do with HTML & CSS).

In the same way that the latest features from the HTML and CSS specifications are only supported in the most recent browsers, so the latest features of ECMAScript are only found in recent browsers. This will not affect much of what you have learned in this book (and jQuery helps iron out issues with backwards compatibility), but it is worth noting for the techniques you meet in this chapter.

The following methods of the Array object were all introduced in ECMAScript version 5, and they are not supported by Internet Explorer 8 (or older): forEach(), some(), every(), filter(), map().

For these methods to work in older browsers you include the ECMAScript 5 Shim, a script that reproduces their functionality for legacy browsers: https://github.com/es-shims/es5-shim

ARRAYS VS. OBJECTS CHOOSING THE BEST DATA STRUCTURE

In order to represent complex data you might need several objects. Groups of objects can be stored in arrays or as properties of other objects. When deciding which approach to use, consider how you will use the data.

OBJECTS IN AN ARRAY

When the order of the objects is important, they should be stored in an array because each item in an array is given an index number. (Key-value pairs in objects are not ordered.) But note that the index number can change if objects are added/removed. Arrays also have properties and methods that help when working with a sequence of items, e.g.,

• The sort() method reorders items in an array.
• The length property counts the number of items.

var people = [
  {name: ‘Casey’, rate: 70, active: true},
  {name: ‘Camille’, rate: 80, active: true},
  {name: ‘Gordon’, rate: 75, active: false},
  {name: ‘Nigel’, rate: 120, active: true}
]

To retrieve data from an array of objects, you can use the index number for the object:
// This retrieves Camille's name and rate
person[1].name;
person[1].rate;

To add/remove objects in an array you use array methods.

To iterate over the items in an array you can use forEach().

OBJECTS AS PROPERTIES

When you want to access objects using their name, they work well as properties of another object (because you would not need to iterate through all objects to find that object as you would in an array).

But note that each property must have a unique name. For example, you could not have two properties both called Casey or Camille within the same object in the following code.

var people = {
  Casey = {rate: 70, active: true},
  Camille = {rate: 80, active: true},
  Gordon = {rate: 75, active: false},
  Nigel = {rate: 120, active: true}
}

To retrieve data from an object stored as a property of another object, you can the object's name:
// This retrieves Casey's rate
people.Casey.rate;

To add/remove objects to an object you can use the delete keyword or set it to a blank string.

To iterate over child objects you can use Object.keys.

FILTERING

Filtering lets you reduce a set of values.
It allows you to create a subset of data that meets certain criteria.

To look at filtering, we will start with data about freelancers and their hourly rate. Each person is represented by an object literal (in curly braces). The group of objects is held in an array:

var people = [
  {
    name: ‘Casey’,
    rate: 60
  },
  {
    name: ‘Camille’,
    rate: 80
  },
  {
    name: ‘Gordon’,
    rate: 75
  },
  {
    name: ‘Nigel’,
    rate: 120
  }
];

The data will be filtered before it is displayed. To do this we will loop through the objects that represent each person. If their rate is more than $65 and less than $90, they are put in a new array called results.

USING ARRAY METHODS TO FILTER DATA

The array object has two methods that are very useful for filtering data. Here you can see both used to filter the same set of data. As they filter the data, the items that pass a test are added to a new array.

The two examples on the right both start with an array of objects (shown on p534) and use a filter to create a new array containing a subset of those objects. The code then loops through the new array to show the results (as you saw on the previous page).

• The first example uses the forEach() method.
• The second example uses the filter() method.

forEach()

The forEach() method loops through the array and applies the same function to every item in it. forEach() is very flexible because the function can perform any kind of processing with the items in an array (not just filtering as shown in this example). The anonymous function acts as a filter because it checks if a person's rates are within a specified range and, if so, adds them to a new array.

Note how person is used as a parameter name and acts as a variable inside the functions:

• In the forEach() example it is used as a parameter of the anonymous function.
• In the filter() example it is used as a parameter of the priceRange() function.

It corresponds to the current object from the people array and is used to access that object's properties.

filter()

The filter() method also applies the same function to each item in the array, but that function only returns true or false. If it returns true, the filter() method adds that item to a new array.

The syntax is slightly simpler than forEach(), but is only meant to be used to filter data.

DYNAMIC FILTERING

If you let users filter the contents of a page, you can build all of the HTML content, and then show and hide the relevant parts as the user interacts with the filters.

Imagine that you were going to provide the user with a slider so that they could update the price that they were prepared to pay per hour. That slider would automatically update the contents of the table based upon the price range the user had specified.

If you built a new table every time the user interacts with the slider (like the previous two examples that showed filtering), it would involve creating and deleting a lot of elements. Too much of this type of DOM manipulation can slow down your scripts.

A far more efficient solution would be to:

Below, the range slider used is a jQuery plugin called noUiSlider (written by Léon Gerson).
http://refreshless.com/nouislider/

Before you see the code for this example, take a moment to think about how to approach this script… Here are the tasks that the script needs to perform:

i) It needs to go through each object in the array and create a row for that person.

ii) Once the rows have been created, they need to be added to the table.

iii) Each row needs to be shown / hidden depending on whether that person is within the price range shown on the slider. (This task happens each time the slider is updated.)

In order to decide which rows to show / hide, the code needs to cross-reference between:

• The person object in the people array (to check how much that person charges)
• The row that corresponds to that person in the table (which needs to be made visible or hidden)

To build this cross-reference we can create a new array called rows. It will hold a series of objects with two properties:

• person: a reference to the object for this person in the people array
• $element: a jQuery collection containing the corresponding row in the table

In the code, we create a function to represent each of the tasks identified on the left. The new cross-reference array will be created in the first function:

makeRows() will create a row in the table for each person and add the new object into the rows array

appendRows() loops through the rows array and adds each of the rows to the table

update() will determine which rows are shown or hidden based on data taken from the slider

In addition, we will add a fourth function: init() This function contains all of the information that needs to run when the page first loads (including creating the slider using the plugin).

init is short for initialize; you will often see programmers using this name for functions or scripts that run when the page first loads.

Before looking at the script in detail, the next two pages are going to explain a little more about the rows array and how it creates the cross-reference between the objects and the rows that represent each person.

rows.push({
  person: this,      // person object
  $element: $row     // jQuery collection
});

DYNAMIC FILTERING

FILTERED IMAGE GALLERY

In this example, a gallery of images are tagged. Users click on filters to show matching images.

IMAGES ARE TAGGED

In this example, a series of photos are tagged. The tags are stored in an HTML attribute called data-tags on each of the <img> elements. HTML5 allows you to store any data with an element using an attribute that starts with the word data-. The tags are comma-separated. (See right-hand page)

TAGGED OBJECT

The script creates an object called tagged. The script then goes through each of the images looking at its tags. Each tag is added as a property of the tagged object. The value of that property is an array holding a reference to each <img> element that uses that tag. (See p546-p547)

FILTER BUTTONS

By looping through each of the keys on the tagged object, the buttons can automatically be generated. The tag counts come from the length of the array. Each button is given an event handler. When clicked, it filters the images and only shows those with the tag the user selected. (See p548-p549)

tagged = {
  animators: [p1.jpg, p6.jpg, p9.jpg],
  designers: [p4.jpg, p6.jpg, p8.jpg]
  filmmakers: [p2.jpg, p3.jpg, p5.jpg]
  illustrators: [p1.jpg, p9.jpg]
  photographers: [p2.jpg, p3.jpg, p8.jpg]
}

PROCESSING THE TAGS

Here you can see how the script is set up. It loops through the images and the tagged object is given a new property for each tag. The value of each property is an array holding the images with that tag.

Then move onto the next tag (go back to step 10). When all of the tags for that image have been processed, move to the next image (step 5).

FILTERING THE GALLERY

The filter buttons are created and added by the script. When a button is clicked, it triggers an anonymous function, which will hide and show the appropriate images for that tag.

SEARCH

Search is like filtering but you show only results that match a search term. In this example, you will see a technique known as livesearch. The alt text for the image is used for the search instead of tags.

SEARCH LOOKS IN ALT TEXT OF IMAGES

This example will use the same set of photos that you saw in the last example, but will implement a livesearch feature. As you type, the images are narrowed down to match the search criteria.

The search looks at the alt text on each image and shows only <img> elements whose alt text contains the search term.

IT USES INDEXOF() TO FIND A MATCH

The indexOf() method of the String object is used to check for the search term. If it is not found, indexOf() returns -1. Since indexOf() is case-sensitive, it is important to convert all text (both the alt text and the search term) to lowercase (which is done using the String object's toLowerCase() function).

SEARCH A CUSTOM CACHE OBJECT

We do not want to do the case conversion for each image every time the search terms change, so an object called cache is created to store the text along with the image that uses that text.

When the user enters something into the search box, this object is checked rather than looking through each of the images.

cache = [
  {element: img, text: ‘rabbit’},
  {element: img, text: ‘sea’},
  {element: img, text: ‘deer’},
  {element: img, text: ‘new york street map’},
  {element: img, text: ‘trumpet player’},
  {element: img, text: ‘logo ident’},
  {element: img, text: ‘bicycle japan’},
  {element: img, text: ‘aqua logo’},
  {element: img, text: ‘ghost’}
]

SEARCH TEXT

This script can be divided into two key parts:

SETTING UP THE CACHE OBJECT

1. Place the script in an IIFE (not shown in flowchart).

2. The $imgs variable holds a jQuery selection containing the images.

3. $search holds search input.

4. The cache array is created.

5. Loop through each image in $imgs using .each(), and run an anonymous function on each one:

6. Use push() to add an object to the cache array representing that image.

7. The object's element property holds a reference to the <img> element.

8. Its text property holds the alt text. Note that two methods process the text:
.trim() removes spaces from the start and end.
.toLowerCase() converts it all to lowercase.

FILTERING IMAGES WHEN USER TYPES IN SEARCH BOX

9. Declare a function called filter().

10. Store the search text in a variable called query. Use .trim() and .toLowerCase() to clean the text.

11. Loop through each object in the cache array and call the same anonymous function on each:

12. A variable called index is created and set to 0.

13. If query has a value:

14. Use indexOf() to check if the search term is in the text property of this object.
The result is stored in the index variable. If found, it will be a positive number. If not, it will be -1.

15. If the value of index is -1, set the display property of the image to none. Otherwise, set display to a blank string (showing the image). Move onto the next image (step 11).

16. Check if the browser supports the input event. (It works well in modern browsers, but is not supported in IE8 or earlier.)

17. If so, when it fires on the search box, call the filter() function.

18. Otherwise, use the input event to trigger it.

SORTING

Sorting involves taking a set of values and reordering them. Computers often need detailed instructions about in order to sort data. In this section, you meet the Array object's sort() method.

When you sort an array using the sort() method, you change the order of the items it holds.

Remember that the elements in an array have an index number, so sorting can be compared to changing the index numbers of the items in the array.

By default, the sort() method orders items lexicographically. It is the same order dictionaries use, and it can lead to interesting results (see the numbers below).

To sort items in a different way, you can write a compare function (see right-hand page).

Lexicographic order is as follows:

1. Look at the first letter, and order words by the first letter.

2. If two words share the same first letter, order those words by the second letter.

3. If two words share the same first two letters, order those words by the third letter, etc.

SORTING STRINGS

Take a look at the array on the right, which contains names. When the sort() method is used upon the array, it changes the order of the names.

var names = [‘Alice’, ‘Ann’, ‘Andrew’, ‘Abe’];
names.sort();

The array is now ordered as follows:
[‘Abe’, ‘Alice’, ‘Andrew’, ‘Ann’];

SORTING NUMBERS

By default, numbers are also sorted lexicographically, and you can get some unexpected results. To get around this you would need to create a compare function (see next page).

var prices = [1, 2, 125, 19, 14, 156];
prices.sort();

The array is now ordered as follows:
[1, 125, 14, 156, 19, 2]

CHANGING ORDER USING COMPARE FUNCTIONS

If you want to change the order of the sort, you write a compare function. It compares two values at a time and returns a number.
The number it returns is then used to rearrange the items in the array.

The sort() method only ever compares two values at a time (you will see these referred to as a and b), and it determines whether value a should appear before or after value b.

Because only two values are compared at a time, the sort() method may need to compare each value in the array with several other values in the array (see diagram on the next page).

sort() can have an anonymous or a named function as a parameter. This function is called a compare function and it lets you create rules to determine whether value a should come before or after value b.

COMPARE FUNCTIONS MUST RETURN NUMBERS

A compare function should return a number. That number indicates which of the two items should come first.

Indicates that it should show a before b

The sort() method will determine which values it needs to compare to ensure the array is ordered correctly.

Indicates that the items should remain in the same order

You just write the compare function so that it returns a number that reflects the order in which you want items to appear.

Indicates that it should show b before a

To see the order in which the values are being compared, you can add the console.log() method to the compare function. For example: console.log(a + ‘ − ’ + b + ‘ = ’ + (b − a));

SORTING NUMBERS

Here are some examples of compare functions that can be used as a parameter of the sort() method.

ASCENDING NUMERICAL ORDER

To sort numbers in an ascending order, you subtract the value of the second number b from the first number a. In the table on the right, you can see examples of how two values from the array are compared.

var prices = [1, 2, 125, 2, 19, 14];
prices.sort(function(a, b) {
  return a - b;
});

DESCENDING NUMERICAL ORDER

To order numbers in a descending order, you subtract the value of the first number a from the second number b.

var prices = [1, 2, 125, 2, 19, 14];
prices.sort(function(a, b) {
  return b - a;
});

RANDOM ORDER

This will randomly return a value between -1 and 1 creating a random order for the items.

var prices = [1, 2, 125, 2, 19, 14];
prices.sort(function() {
  return 0.5 - Math.random();
});

SORTING DATES

Dates need to be converted into a Date object so that they can then be compared using < and > operators.

var holidays = [
  ‘2014-12-25’,
  ‘2014-01-01’,
  ‘2014-07-04’,
  ‘2014-11-28’
];

holidays.sort(function(a, b){
    var dateA = new Date(a);
    var dateB = new Date(b);

    return dateA - dateB
});

The array is now ordered as follows:

holidays = [
  ‘2014-01-01’,
  ‘2014-07-04’,
  ‘2014-11-28’,
  ‘2014-12-25’
]

DATES IN ASCENDING ORDER

If the dates are held as strings, as they are in the array shown on the left, the compare function needs to create a Date object from the string so that the two dates can be compared.

Once they have been converted into a Date object, JavaScript stores the date as the number of milliseconds since the 1st January 1970.

With the date stored as a number, two dates can be compared in the same way that numbers are compared on the left-hand page.

SORTING A TABLE

In this example, the contents of a table can be reordered. Each row of the table is stored in an array.
The array is then sorted when the user clicks on a header.

SORT BY HEADER

When users click on a heading, it triggers an anonymous function to sort the contents of the array (which contains the table rows). The rows are sorted in ascending order using data in that column.

Clicking the same header again will show the same column sorted in descending order.

DATA TYPES

Each column can contain one of the following types of data:

• Strings
• Time durations (mins/secs)
• Dates

If you look at the <th> elements, the type of data used is specified in an attribute called data-sort.

COMPARE FUNCTIONS

Each type of data needs a different compare function. The compare functions will be stored as three methods of an object called compare, which you create on p563:

• name() sorts strings
• duration() sorts mins/secs
• date() sorts dates

COMPARE FUNCTIONS

return a > b ? 1 : 0

A shorthand for a conditional operator is the ternary operator. It evaluates a condition and returns one of two values. The condition is shown to the left of the question mark.

The two options are shown to the right separated by a colon. If the condition returns a truthy value, the first value is returned. If the value is falsy, the value after the colon is returned.

SORTING COLUMNS