compress data for dynamic tables

I'm using javascript to construct large tables from an array of data,
using ideas from:


http://www.oreillynet.com/pub/a/java...nygoodman.html

The data itself cannot be constructed by the javascript code, so is
explicitly passed in with a large array, e.g.

var data = new Array();
data.push(['name','phone','address','id','gender'])
data.push(['john','555-5555','main st','123','m'])
....
data.push(['sue','444-4444','park ave','456','f'])

There may be several hundred to thousands of these entries.

I was wondering if there's any way to compress the data as it's sent to
the browser, so that javascript can unpack it to the original array.

Any ideas much appreciated.
Thanks

kpmassey (AT) gmail (DOT) com wrote:

I'm using javascript to construct large tables from an array of data,
using ideas from:

http://www.oreillynet.com/pub/a/java...nygoodman.html

The article seems to assume that if you want to sort tables, you have
to build them on the client. That's not so, most table sorts that I've
seen use a table that is already in the page and just sort what's
there, there's no need to create or delete any nodes at all.

In regard to table creation, the article does not make any mention of
DOM insertRow/Cell methods, which, if not faster than createElement,
are at least more convenient to code. It also ignores cloneNode: it
may be faster to clone an existing row and cells and modify the cell
content than use either of the other methods.

Therefore Mr. Goodman can only get half marks even if the rest of his
article is perfect - which it isn't: e.g. for removing all the child
nodes of an element, try replacing a node with a shallow clone of
itself (can be buggy in some browsers).

The data itself cannot be constructed by the javascript code, so is
explicitly passed in with a large array, e.g.

That is an incorrect assumption on Goodman's behalf that you have
accepted: you get the original data from the original table, there is
no need to pass it as a script variable.

var data = new Array();
data.push(['name','phone','address','id','gender'])
data.push(['john','555-5555','main st','123','m'])
...
data.push(['sue','444-4444','park ave','456','f'])

I didn't see anywhere that Goodman shows the array syntax, I'd have
thought the best way is a literal:

var data = [
['name','phone','address','id','gender'],
['john','555-5555','main st','123','m'],
...
['sue','444-4444','park ave','456','f']
];

If you want to take that further and have all the table attributes in
an object, check out JSON: <URL: http://www.json.org/ >

There may be several hundred to thousands of these entries.

I was wondering if there's any way to compress the data as it's sent to
the browser, so that javascript can unpack it to the original array.

There is no need if all you want to do is sort the table. Put the data
in the page in an HTML table, use script to construct a data array at
the client from the table (you only need the data from the column(s) to
be sorted, not the entire table). After all, you only need the array
if the user sorts the table.

--
Fred

Fred,
Thanks for your reply. I realize I could get the data from the html
table, but that requires even more bandwidth because I have to include
<td class= ""> statements for every field in the table, and I've found
it's actually easier programming to just create the table from scratch
as Goodman describes.

Now what I want to do is compress the data so that say, a 200 k file
can be transmitted as a compressed, say 30k,chunk of data, and 2-3k of
javascript code to reconstruct it.

Kenneth


Fred wrote:

kpmassey (AT) gmail (DOT) com wrote:

I'm using javascript to construct large tables from an array of data,
using ideas from:

http://www.oreillynet.com/pub/a/java...nygoodman.html

The article seems to assume that if you want to sort tables, you have
to build them on the client. That's not so, most table sorts that I've
seen use a table that is already in the page and just sort what's
there, there's no need to create or delete any nodes at all.

In regard to table creation, the article does not make any mention of
DOM insertRow/Cell methods, which, if not faster than createElement,
are at least more convenient to code. It also ignores cloneNode: it
may be faster to clone an existing row and cells and modify the cell
content than use either of the other methods.

Therefore Mr. Goodman can only get half marks even if the rest of his
article is perfect - which it isn't: e.g. for removing all the child
nodes of an element, try replacing a node with a shallow clone of
itself (can be buggy in some browsers).


The data itself cannot be constructed by the javascript code, so is
explicitly passed in with a large array, e.g.

That is an incorrect assumption on Goodman's behalf that you have
accepted: you get the original data from the original table, there is
no need to pass it as a script variable.


var data = new Array();
data.push(['name','phone','address','id','gender'])
data.push(['john','555-5555','main st','123','m'])
...
data.push(['sue','444-4444','park ave','456','f'])

I didn't see anywhere that Goodman shows the array syntax, I'd have
thought the best way is a literal:

var data = [
['name','phone','address','id','gender'],
['john','555-5555','main st','123','m'],
...
['sue','444-4444','park ave','456','f']
];

If you want to take that further and have all the table attributes in
an object, check out JSON: <URL: http://www.json.org/


There may be several hundred to thousands of these entries.

I was wondering if there's any way to compress the data as it's sent to
the browser, so that javascript can unpack it to the original array.

There is no need if all you want to do is sort the table. Put the data
in the page in an HTML table, use script to construct a data array at
the client from the table (you only need the data from the column(s) to
be sorted, not the entire table). After all, you only need the array
if the user sorts the table.

--
Fred

kpmassey (AT) gmail (DOT) com wrote:

Fred,

Please don't top-post here - reply below trimmed quotes.

Thanks for your reply. I realize I could get the data from the html
table, but that requires even more bandwidth because I have to include
td class= ""> statements for every field in the table,

No you don't. How you identify the table(s) to be sorted is up to you,
it can be a single class attribute on the table itself. You don't have
to use someone else's sorting script, they are reasonably simple to
write.

In regard to bandwidth, the data is compressed on the wire anyway,
repeating character patterns (like element tags) are compressed very
efficiently. Write the same table as HTML and also as an array
literal, zip them and see how much you really save - it will give you a
rough idea.

and I've found
it's actually easier programming to just create the table from scratch
as Goodman describes.

Now what I want to do is compress the data so that say, a 200 k file
can be transmitted as a compressed, say 30k,chunk of data, and 2-3k of
javascript code to reconstruct it.

I would be very surprised if any browser could reconstruct a table from
an array faster than the equivalent HTML could be rendered, regardless
of how you do it. I can only imagine that you will use an embedded
document.write to do the HTML, any other technique will require you to
do it onload, which I think users will find very annoying.

If you want to cut down on bandwidth, drop closing </p></td> and </tr>
tags - they aren't needed in valid HTML 4.


--
Fred