Manually Processing Queue Items

Of course, you don’t have to trigger one queued function from another – you could rely on an external trigger to dequeue each item, such as the user pressing the button I added to the document. Listing 34-2 shows how to do this.

Listing 34-2.  Dequeuing Functions Explicitly

...
<script type="text/javascript">
    $(document).ready(function() {
                             
        $("input").queue("gen", function() {
            $(this).val(100).css("border", "thin red solid");
        }).queue("gen", function() {
            $(this).val(0).css("border", "");
        }).queue("gen", function() {
            $(this).css("border", "thin blue solid");
            $("#dequeue").attr("disabled", "disabled");
        });
          
       $("<button id=dequeue>Dequeue Item</button>").appendTo("#buttonDiv")
            .click(function(e) {
                $("input").dequeue("gen");
                e.preventDefault();
            });
    });
</script>
...

In this script, I have chained the queue calls together and added a function that sets a border on the selected elements and disables the button element, which must be clicked to process each item in the queue – there is no automated chaining.

Using the Grep Method

The grep method allows us to find all of the elements in an array that are matched by a filter function. Listing 34-3 provides a demonstration of this method.

Listing 34-3.  Using the Grep Method

...
<script type="text/javascript">
    $(document).ready(function() {
        var flowerArray = ["aster", "daffodil", "rose", "peony", "primula", "snowdrop"];
          
        var filteredArray = $.grep(flowerArray, function(elem, index) {
            return elem.indexOf("p") > -1;
        });
          
        for (var i = 0; i < filteredArray.length; i++) {
            console.log("Filtered element: " + filteredArray[i]);
        }  
    });
</script>
...

Our filter function is passed two arguments – the first is the element in the array, and the second is the array index of that element. Our function is called for each item in the array and returns true if the current item to be included in the filtered results.

In this example, I use the grep method on an array of strings, filtering out those that don’t contain the letter p. I write the contents of the filtered array to the console, producing the following results:

Filtered element: peony
Filtered element: primula
Filtered element: snowdrop

You can supply an additional argument to the grep method – if this argument is true, then the filtering process is inverted and the result contains those elements that the function filtered out. Listing 34-4 shows the effect of this argument.

Listing 34-4.  Inverting the Selection Using the Grep Method

...
<script type="text/javascript">
    $(document).ready(function() {
          
        var flowerArray = ["aster", "daffodil", "rose", "peony", "primula", "snowdrop"];
          
        var filteredArray = $.grep(flowerArray, function(elem, index) {
            return elem.indexOf("p") > -1;
        },true);
          
        for (var i = 0; i < filteredArray.length; i++) {
            console.log("Filtered element: " + filteredArray[i]);
        }  
          
    });
</script>
...

This change produces the following results:

Filtered element: aster
Filtered element: daffodil
Filtered element: rose

Using the inArray Method

The inArray method determines if an array contains a specified value – the method returns the index of the item if it is in the array and -1 otherwise. Listing 34-5 demonstrates the inArray method.

Listing 34-5.  Using the inArray Method

...
<script type="text/javascript">
    $(document).ready(function() {
        var flowerArray = ["aster", "daffodil", "rose", "peony", "primula", "snowdrop"];
        console.log("Array contains rose: " +$.inArray("rose", flowerArray));
        console.log("Array contains lily: " +$.inArray("lily", flowerArray));
    });
</script>
...

This script checks to see if the array of flowers contains rose and lily. The results are as follows:

Array contains rose: 2
Array contains lily: -1

Using the Map Method

The map method uses a function to project the contents of an array or a map object into a new array, using a function to determine how each item is represented in the result. Listing 34-6 shows the use of the map method with an array.

Listing 34-6.  Using the Map Method to Project an Array

...
<script type="text/javascript">
    $(document).ready(function() {
        var flowerArray = ["aster", "daffodil", "rose", "peony", "primula", "snowdrop"];
   
        var result = $.map(flowerArray, function(elem, index) {
            return index + ": " + elem;
        });
          
        for (var i = 0; i < result.length; i++) {
            console.log(result[i]);
        }  
     });
</script>
...

Our mapping function is executed for each item in the array and is passed the item and its index in the array as arguments. The result from the function is included in the array returned by the map method. In this script, I transform each item in the array by concatenating the value with its index, producing the following results:

0: aster
1: daffodil
2: rose
3: peony
4: primula
5: snowdrop

You can use the map method to selectively project an array – there will be no corresponding item in the result if you don’t return a value from the function for the item being processed. Listing 34-7 shows how you can selectively project from an array.

Listing 34-7.  Selectively Mapping an Array

...
<script type="text/javascript">
    $(document).ready(function() {
        var flowerArray = ["aster", "daffodil", "rose", "peony", "primula", "snowdrop"];
   
        var result = $.map(flowerArray, function(elem, index) {
            if (elem != "rose") {
                return index + ": " + elem;
            }  
        });
          
        for (var i = 0; i < result.length; i++) {
            console.log(result[i]);
        }
    });
</script>
...

Results are generated for all of the array values except rose, which gives rise to the following results:

0: aster
1: daffodil
3: peony
4: primula
5: snowdrop

Using the Merge Method

The merge method concatenates two arrays, as demonstrated in Listing 34-8.

Listing 34-8.  Using the Merge Method

...
<script type="text/javascript">
    $(document).ready(function() {
          
        var flowerArray = ["aster", "daffodil", "rose", "peony", "primula", "snowdrop"];
        var additionalFlowers = ["carnation", "lily", "orchid"];
   
        $.merge(flowerArray, additionalFlowers);
          
        for (var i = 0; i < flowerArray.length; i++) {
            console.log(flowerArray[i]);
        }  
     });
</script>
...

The items from the second array are appended to the first array, and the array specified by the first argument is modified by the merge process. The script in the example produces the following results:

aster
daffodil
rose
peony
primula
snowdrop
carnation
lily
orchid

Using the Unique Method

The unique method sorts an array of HTMLElement objects into the order in which they appear in the document and removes any duplicate elements. Listing 34-9 shows how to use this method.

Listing 34-9.  Using the Unique Method

...
<script type="text/javascript">
    $(document).ready(function() {
          
        var selection = $("img[src*=rose], img[src*=primula]").get();
        $.merge(selection, $("img[src*=aster]"));
        $.merge(selection, $("img"));
          
        $.unique(selection);
          
        for (var i =0; i < selection.length; i++) {
            console.log("Elem: " + selection[i].src);
        }  
          
    });
</script>
...

The sorting process is done in-place, meaning that the array passed as the argument to the unique method is modified. In this example, I created an array of HTMLElement objects that contain duplicates and which are not in document order and then apply the unique method.

Using the Type Method

The type method is slightly different in that is returns the base JavaScript type of an object. The result will be one of the following strings:

• boolean
• number
• string
• function
• array
• date
• regexp
• object

Listing 34-11 shows the use of the type method.

Listing 34-11.  Using the Type Method

...
<script type="text/javascript">
    $(document).ready(function() {
          
        function myFunc() {
            console.log("Hello!");
        }  
          
        var jq = $("img");
        var elem = document.getElementById("row1");
          
        console.log("Type: " +$.type(myFunc));
        console.log("Type: " +$.type(jq));
        console.log("Type: " +$.type(elem));
    });
</script>
...

In this script, I use the type method on a function, a jQuery object, and an HTMLElement object. The results are as follows:

Type: function
Type: object
Type: object

Serializing Form Data

The serialize and serializeArray methods are a convenient way to extract the details from a set of form elements in a way that is useful for regular or Ajax form submissions. Listing 34-12 shows both methods in use.

Listing 34-12.  Serializing Form Data

...
<script type="text/javascript">
    $(document).ready(function() {
          
       $("<button>Serialize</button>").appendTo("#buttonDiv").click(function(e) {
              
            var formArray = $("form").serializeArray();
            console.log("JSON: " + JSON.stringify(formArray))
          
            var formString = $("form").serialize();
            console.log("String: " + formString)
              
            e.preventDefault();
        });
          
    });
</script>
...

In this example, I serialize the form elements in the document using both methods and write the results to the console. The serializeArray method returns a JavaScript array that contains one object for each form element in the document. These objects have two properties: the name property contains the value of the name attribute of the element, and the value property contains the element’s value. Here is the output from the example document:

By contrast, the serialize method creates an encoded string, as follows:

aster=1&daffodil=0&rose=0&peony=0&primula=2&snowdrop=0

Parsing Data

The parseJSON and parseXML methods are especially useful when dealing with the results of Ajax requests. For most web applications, JSON has taken over as the data format of choice, for the reasons I outlined in Chapter 14. XML is still used, but I only find myself using this XML data when integrating new applications with legacy back-end systems. Listing 34-13 shows the parseJSON method in use.

Listing 34-13.  Parsing JSON Data

...
<script type="text/javascript">
    $(document).ready(function() {
          
       $("<button>Serialize</button>").appendTo("#buttonDiv").click(function(e) {
              
            var jsonData = '{"name": "Adam Freeman", "city": "London", "country": "UK"}'
                          
            var dataObject = $.parseJSON(jsonData)
              
            for (var prop in dataObject) {
                console.log("Property: " + prop + " Value: " + dataObject[prop])
            }  
  
            e.preventDefault();
        });
          
    });
</script>
...

In this example, I define a simple JSON string and use the parseJSON method to convert it into a JavaScript object. I then enumerate the properties in the object and their values to the console, producing the following output:

Property: name Value: Adam Freeman
Property: city Value: London
Property: country Value: UK

Trimming Strings

The trim method removes all of the whitespace from the start and end of string – this includes spaces, tabs, and newlines. This is a feature that most programming languages support as part of their core handling of character data, but which is missing from JavaScript for some reason. Listing 34-14 shows the trim method in use.

Listing 34-14.  Using the Trim Method

...
<script type="text/javascript">
    $(document).ready(function() {
          
       $("<button>Serialize</button>").appendTo("#buttonDiv").click(function(e) {
              
            var sourceString = "
  This string contains whitespace    ";
            console.log(">" + sourceString + "<")
                          
            var resultString = $.trim(sourceString);
            console.log(">" + resultString + "<")
              
            e.preventDefault();
        });
          
    });
</script>
...

In this example, I use the trim method and write the original and trimmed strings to the console, producing the following results:

>  This string contains whitespace    <
>This string contains whitespace<

Checking Element Containment

The contains method checks to see if one element contains another. Both arguments are expressed as HTMLElement objects, and the method returns true if the element represented by the first argument contains the element represented by the second argument. Listing 34-15 provides a demonstration of the contains method.

Listing 34-15.  Using the Contains Method

...
<script type="text/javascript">
    $(document).ready(function() {
        $("img").hover(function(e) {
            var elem = document.getElementById("row1");
            if ($.contains(elem, this)) {
                $(e.target).css("border", e.type == "mouseenter" ?
                                            "thick solid red" : "");
            }  
        });
    });
</script>
...

In this script, I obtain an HTMLElement object using the DOM API and check to see that it contains the element passed to an event handler method – if it does, I set a border for the element that triggered the event.