3 ms·

I'm having a hard time understanding why everyone's jazzed about this. When is this a useful thing to do? I've literally never once encountered a problem where

by bdg 13y ago

I'm having a hard time understanding why everyone's jazzed about this. When is this a useful thing to do? I've literally never once encountered a problem where this would be useful. I'm not trying to sound harsh, I just don't understand when I'd ever need to do something like this.

JangoSteve 13y ago
This library is like a building block to e.g. building your own interactive table functionality. Let's say you have an HTML table, and you want to allow users to dynamically search or sort the table. Step 1 could be to translate the table to JSON, step 2 would be do all your JS magic on the JSON data set, and step 3 would be write it back to the table. This approach is cleaner than trying to do a bunch of logic on the DOM text. So, this plugin is step 1 done for you.
- bdg 13y ago
  I suppose that's my issue. Dynamically searching or sorting wouldn't require converting to JSON, I'd rather work with the existing table object: tableName.rows[rowNum].cells[cellNum] Instead of loading all of that into a variable (a second time, it's already an object on your page), trying to keep it in sync, binding events in both directions to keep it in sync, the load of doing twice the work, the lag of redrawing the entire table every time you want to do something, etc.. I don't see why this is cleaner than working on the DOM. I've done this a number of times and only found headaches when trying to build something larger than a silly toy or a list of 30 items on a table. IIRC DataTables did something like this internally last time I looked at it, and that thing konks out and either slows down your page or crashes the browser depending on how many cells you load into it.
  - JangoSteve 13y ago
    I think the issue is that, if you are doing something like sorting, you actually are going to have to redraw the entire table. Also, for things like plain-text searching, it's faster to do it on a collection of objects detached from the DOM in JavaScript than to scan the DOM, and especially if you're doing non-text comparisons (like comparing a number with the parseFloat representation of the values in one of the table columns for all rows). And finally, if you are going to read and then redraw in the DOM, it's best to do it as grouped atomic operations due to the inefficiency making the browser reflow (https://developers.google.com/speed/articles/reflow https://developers.google.com/speed/articles/reflow). For what it's worth, this is how Dynatable works internally, though I haven't had any issues with it being slow, though it's possible I just haven't used it with large enough data sets yet (I've only used it on tables of probably 1000 rows or less so far).
ebiester 13y ago
I had to do a version of this for myself a few weeks back in conjunction with datatables. We actually also use form elements in the table as well, which I had to handle as special cases. We'd then send the JSON back to the server, which would generate an Excel file. Why not just send back to the server instead? First, sending the JSON back turned out to be faster than rerunning the query. Second, datatables has a full text search option which made things simpler for our case. (Datatables has an export plugin, but it uses flash and only generates thinly-veiled CSV.) So there's a use case for something like this.
- bdg 13y ago
  Have you thought about sending the HTML of that data back instead of computing the JSON encoding? Your server side could actually parse the DOM and possibly preserve things like fonts/styles when loading into excel (I know how giddy managers get when their auto-generated reports have styles).
  - ebiester 13y ago
    In our case, we didn't want to send it all back, and we had our own style to enact on the server side. Sending back the HTML is perfectly fine (albeit a little larger) but as this is JSON, you could easily send back the style to the server if you so wanted.
lightswitch05 13y ago
Hey, great question! Well, I don't know why other people might need this plugin, but I needed to gather data from a dynamic user-editable table. Its not all that complicated getting data from an HTML table, but my specific table is dynamic in sense of how many column and rows are available. Also the heading names. I considered keeping track of the contents as the user edited it, but in the end it was just easiest to get the end result rather than keeping track of all the edits. So, thats where table-to-JSON came from. Had no clue so many people would be interested in such a simple plugin.

by bdg 13y ago

JangoSteve 13y ago

This library is like a building block to e.g. building your own interactive table functionality. Let's say you have an HTML table, and you want to allow users to dynamically search or sort the table. Step 1 could be to translate the table to JSON, step 2 would be do all your JS magic on the JSON data set, and step 3 would be write it back to the table. This approach is cleaner than trying to do a bunch of logic on the DOM text. So, this plugin is step 1 done for you.

bdg 13y ago
I suppose that's my issue. Dynamically searching or sorting wouldn't require converting to JSON, I'd rather work with the existing table object: tableName.rows[rowNum].cells[cellNum] Instead of loading all of that into a variable (a second time, it's already an object on your page), trying to keep it in sync, binding events in both directions to keep it in sync, the load of doing twice the work, the lag of redrawing the entire table every time you want to do something, etc.. I don't see why this is cleaner than working on the DOM. I've done this a number of times and only found headaches when trying to build something larger than a silly toy or a list of 30 items on a table. IIRC DataTables did something like this internally last time I looked at it, and that thing konks out and either slows down your page or crashes the browser depending on how many cells you load into it.
- JangoSteve 13y ago
  I think the issue is that, if you are doing something like sorting, you actually are going to have to redraw the entire table. Also, for things like plain-text searching, it's faster to do it on a collection of objects detached from the DOM in JavaScript than to scan the DOM, and especially if you're doing non-text comparisons (like comparing a number with the parseFloat representation of the values in one of the table columns for all rows). And finally, if you are going to read and then redraw in the DOM, it's best to do it as grouped atomic operations due to the inefficiency making the browser reflow (https://developers.google.com/speed/articles/reflow https://developers.google.com/speed/articles/reflow). For what it's worth, this is how Dynatable works internally, though I haven't had any issues with it being slow, though it's possible I just haven't used it with large enough data sets yet (I've only used it on tables of probably 1000 rows or less so far).

ebiester 13y ago

I had to do a version of this for myself a few weeks back in conjunction with datatables. We actually also use form elements in the table as well, which I had to handle as special cases. We'd then send the JSON back to the server, which would generate an Excel file. Why not just send back to the server instead? First, sending the JSON back turned out to be faster than rerunning the query. Second, datatables has a full text search option which made things simpler for our case. (Datatables has an export plugin, but it uses flash and only generates thinly-veiled CSV.) So there's a use case for something like this.

bdg 13y ago
Have you thought about sending the HTML of that data back instead of computing the JSON encoding? Your server side could actually parse the DOM and possibly preserve things like fonts/styles when loading into excel (I know how giddy managers get when their auto-generated reports have styles).
- ebiester 13y ago
  In our case, we didn't want to send it all back, and we had our own style to enact on the server side. Sending back the HTML is perfectly fine (albeit a little larger) but as this is JSON, you could easily send back the style to the server if you so wanted.

lightswitch05 13y ago

Hey, great question! Well, I don't know why other people might need this plugin, but I needed to gather data from a dynamic user-editable table. Its not all that complicated getting data from an HTML table, but my specific table is dynamic in sense of how many column and rows are available. Also the heading names. I considered keeping track of the contents as the user edited it, but in the end it was just easiest to get the end result rather than keeping track of all the edits. So, thats where table-to-JSON came from. Had no clue so many people would be interested in such a simple plugin.