YUI Library Home

YUI Library Examples: DataSource Utility: Extracting data from an HTML table

DataSource Utility: Extracting data from an HTML table

DataSource supports using a table in markup as its source of truth.

This example illustrates how to create a "pass-thru" DataSource instance to leverage the DOM walking and parsing routines inside in order to extract the table's data into a JavaScript array structure.

Total Amount Due: (click the Extract button)

Table in markup with data in it
Due Date Account Number Quantity Amount Due
1/23/1999 29e8548592d8c82 12 $150.00
5/19/1999 83849 8 $60.00
8/9/1999 11348 1 -$34.99
1/23/2000 29e8548592d8c82 10 -$1.00
4/28/2000 37892857482836437378273 123 $33.32
1/23/2001 83849 5 -$15.00
9/30/2001 224747 14 $56.78

What we have and what we'll get

In this example, a table rendered in the page's markup will be parsed into an array, and stored in YAHOO.example.data.

The markup looks like this:

The resulting data will look like this:

Create a DataSource instance

The first step is to create the DataSource instance, seeding it with the <table> element, which we get via YAHOO.util.Dom.get. Configure the responseType and responseSchema to identify the mapping between columns and data key names (first column will be called "due").

We'll take advantage of the often-ignored second constructor parameter to configure the DataSource inline.

Parsing the data into correct data types

By default, DataSource will treat all table cell data as strings. We can add parsers to the field declarations to identify how the data should be stored. DataSource comes with a few parsers out of the box, but you can add your own custom parser by supplying a function as the parser in the field definition.

Another way to create a parser common across all DataSource instances is to add your parse function to the YAHOO.util.DataSource.Parser object. The property name you use can then be referenced as a string in the field's parser configuration.

We'll do this for the Amount column, since DataSource doesn't have a parser that can handle currency figures.

Capture the data in the sendRequest callback

The next and final step is to issue a sendRequest, providing a simple success handler to assign the parsed response's results array to our desired destination.

At this point the data is available in YAHOO.example.data.

Change into a pass-thru

Since the DataSource is only needed for this one operation, and only one method is being executed, we don't even need to store the instance in a variable. Just call sendRequest on the result of the DataSource constructor.

Full Code Listing

Below is a full code listing for this example, including the code for the buttons, making use of the extracted data.

JavaScript

HTML

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

More DataSource Utility Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings