Finding Data

Most applications of jQuery data or the Dataset API require you to find and process elements that have data set on them. This is fairly easy using the attribute selectors. The only complication is that you need to keep in mind that you have to use the dashed form of the name to find the DOM elements and the camel-case form in the JavaScript.

For example, to extract all DOM objects that have an attribute data-mydata-x you would use:

alert($("[data-mydata-x]");

and to get the value of the data you would use:

alert($("[data-mydata-x]").data("mydataX"));

See the section on Attribute selectors in Chapter 3.

You can, of course, find only the DOM objects that have a data- attribute set to a particular value or that contains a substring. For example

alert($("[data-mydata-x*='my']");

selects only elements with a data-mydata-x attribute with a value that contains the substring my.

Using attribute selectors you can pick out any DOM objects with a given attribute name and a value that is specified, prefixed, ends or contains a specific word. This is flexible, but often you need to get all the elements that have a data-* attribute of any sort. The problem is jQuery doesn't provide any way to select elements with attribute names that match a pattern. It is fairly easy to create a filter function that will filter a results list to only include elements that have data.

There is a test function, hasData, that returns true if an element has data and false otherwise. This can be used in a filter function to reduce a result array to just the elements that have data:  

var has= $("button").filter(function(){
                      return $.hasData(this);
          });

This finds all button objects and then filters out all of those that don't have data. 

If you try it out you will find that it only filters elements that you have used .data() to actually set data. That is, it doesn't filter out elements that have data-* attributes. The hasData function is testing to see if jQuery has stored data, not that there is a data-* attribute on the original tag.

Notice that jQuery uses its data storage mechanism for internal tasks such as storing information about event handlers that are attached to an element. This means that you might get back elements that you didn't expect to be storing data from the filter function. 

There are many possible ways of testing to see if an element has any data-* but the simplest is to check to see if the DOM object has a non-empty dataset property:

var has= $("button").filter(function(){
 return $.isEmptyObject($(this).prop("dataset"));
 });

This looks complicated but all that happens is that first we find all button elements and filter the results. The filter function simply finds the dataset property - all DOM objects have a dataset property - and then we use the utility function isEmptyObject to check if there is any data stored in the property. This reduces the list to only those elements that have data defined using data-* tags. Notice that this does not select elements that have had data set using nothing but the .data function as this does not add entries to the dataset property. 

Included in chapter but not in this extract

• Using Data
• Utility Functions
• Array functions
• String functions
• Date functions
• Parsing functions 

Summary

• HTML5 introduced the Dataset API which adds the dataset property to all DOM elements and a format for the data-* custom attributes.

• You can add attributes of the form data-name-name-name and so on. 

• The dataset property is set to an object containing key/value pairs corresponding to data-* attributes and their values.

• The keys are obtained from the data-* attributes by dropping the data- prefix and then removing each remaining dash and changing the letter that follows it to upper case. So data-name-name-name becomes nameNameName. 

• You can access the dataset property using the jQuery prop function and then you can access the values using the keys directly as properties. 

• jQuery supports and extends the Dataset API.

• The data function will set and retrieve the data associated with a key.

• The removeData function removes data that you previously set but doesn't remove the attributes from the tags.

• Many JavaScript frameworks make use of data to implement a range of features that go beyond basic HTML; for example to set control types and other options and to create UI elements that don't exist in HTML.