Close
Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

LABS
Now I understand what they mean by tabular data (or: building a relational database using jQuery and <TABLE> tags)

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.

Let’s start with a few tables:

<table class="users">
  <tr>
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
  </tr>
  ...
</table>
<table class="photos">
  <tr>
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url">http://www.example.com/foo.png</td>
  </tr>
</table>

Now we can express some queries:

$('.users')
  .where('.id:eq(1)')
  .select('*')

This is equivalent to SELECT * FROM users WHERE id = 1

$('.users')
  .where('.id:eq(1)')
  .select('.id, .name')

This is equivalent to SELECT id, name FROM users WHERE id = 1. Here is something slightly more complicated:

$('.users')
  .where('.name:contains(a)')
    .and('.name:contains(c)')
  .select('*')

But here is the crowning glory, the inner join:

$('.users')
  .join('.photos')
  .where('.photos.user_id:eq(.users.id)')
    .and('.users.id:eq(1)')
  .select('.photos.url')

This is equivalent to:

SELECT photos.url FROM users, photos
WHERE photos.user_id = users.id
  AND users.id = 1

Download the fun at Github.

Comments
  1. Tim Connor says:

    Hahahahahha, now I have to find an excuse….

  2. Aman Gupta says:

    No benchmarks? =)

  3. We’re not in 2002 anymore. Seriously, relational database in html? I gotta go play with this.

  4. Haha, that’s great. Rock on man.

  5. Alex Chaffee says:

    Hey, and with the right stylesheet, your data dumps are going to look *real* pretty…

    Soon you can even use [CSS3 to style tables](http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/
    )… But darn, that would *totally* violate model-view separation :-)

  6. Geeez… this is seriously cool and fun. But dude, you have too much free time man.

  7. On my side, I ended up writing a CSS3 engine which used a relational database on the server side. The two worlds MUST NEVER COLLIDE!!

  8. seb says:

    this might actually be quite usefull for teaching database queries to students. like some sort of interactive web-based tutorial.

  9. Peter Cooper says:

    That’s it, I’m sold! I’m with Yegge, Resig and the rest. JavaScript is the only language that’ll matter in a few years’ time!

  10. Myles Eftos says:

    That’s awesome. Really awesome… Couple that with things like JS based table sort, you could have a hot little data search engine there…

  11. SFdude says:

    Very nice, using the output to Firebug Console.

    But…from a practical angle,
    what’s the code to display the 3 query results
    in the web page itself,
    not in the Firebug Console?

    (3 results displayed in the page
    containing the 2 tables, “users” and “photos”…).

    Thanks!
    SFdude

  12. Dan Brickley says:

    Very cool :)

    For similar fun in a different syntax, you can play with Jan Grant’s ‘javascript prolog'; eg. I made http://www.w3.org/1999/11/11-WWWProposal/rdfqdemo.html using http://ioctl.org/logic/

  13. Greg Weber says:

    Very clever! I made a tablelib, a jQuery library for serializing javascript object into html tables, and/or querying tables. The querying language is just JSON, and of course there is no joining. http://projects.gregweber.info/tablelib

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *