Spry adds support for CSV and TSV datasets

This post is more than 2 years old.

When preparing for my last Spry presentation, I noticed two new files that weren't documented: SpryCSVDataSet.js and SpryTSVDataSet.js. I pinged the Spry team and discovered that 1.6 added support for both comma separated value files and tab separated files. They just didn't have time to document it - but the cool thing is that - just like JSON support, once you make the dataset your work is done. Everything else is the same. Consider this example:

<html>

<head> <script src="/spryjs/SpryData.js"></script> <script src="/spryjs/SpryCSVDataSet.js"></script>

<script> var ds1 = new Spry.Data.CSVDataSet("people.txt"); </script> <style> .hover { background-color: yellow; } </style> </head>

<body>

<div spry:region="ds1"> <table border="1" cellpadding="10"> <tr> <th onClick="ds1.sort('name','toggle')">Name</th> <th onClick="ds1.sort('group','toggle')">Group</th> </tr> <tr spry:repeat="ds1" spry:hover="hover"> <td>{name}</td><td>{group}</td> </tr> </table> </div>

</body> </html>

As you can see - the only thing in this file unlike other Spry demos I've shown is the use of the new JS file and the creation of a CSVDataSet. Spry supports both cases where CSV files contain the headers in the first row and when they do not. If your CSV file does not contain headers in the first row, you simply flag it when creating the dataset. You can optionally assign it headers as well:

var ds1 = new Spry.Data.CSVDataSet("employees-01.txt", {firstRowAsHeaders: false, columnNames: [ "lastname", "firstname","userid" ] });

For TSV support, you can even specify a different delimiter:

var ds1 = new Spry.Data.TSVDataSet("employees-01.txt", { delimiter: "|"});

Here are two examples:
CSV Example
TSV Example

If you are using Firebug, you can take a look at the text files being loaded. Thanks to Kin Blas for the help!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Alfred Laggner posted on 10/21/2010 at 11:22 PM

your example does not deliver a result. the region only shows the variables in {} like {name} {group}

Comment 2 by Raymond Camden posted on 10/21/2010 at 11:26 PM

The examples no longer work. As this entry was from three years ago - I can't really say why. I don't use Spry anymore. Actually, looking at the sample code with the call to Spry like so: /spryjs, that is most likely the issue. I no longer have the libraries there. So if you download my sample, and Spry separately, you should be able to run them on your own machine.