How to do SQL-like queries in client side browser?

Question

I've been looking for a way to do complex queries like SQL can perform but totally client side. I know that I can get the exact results that I want from doing SQL queries off of the server and I could even AJAX it so that it looks smooth. However for scaleability, performance, and bandwidth reasons I'd prefer to do this all client side.

Some requirements:

• Wide browser compatibility. Anything that can run jQuery is fine. I'd actually prefer that it be a jQuery plugin.
• Can sort on more than one column. For instance, order by state alphabetically and list all cities alphabetically within each state.
• Can filter results. For instance, the equivalent of "where state = 'CA' or 'NY' or 'TX'".
• Must work completely client side so the user only needs to download a large set of data once and can cut the data however they want without constantly fetching data from the server and would in fact be able to do all queries offline after the initial pull.

I've looked around on stackoverflow and found jslinq but it was last updated in 2009 and has no documentation. I also can't tell if it can do more complex queries like ordering on two different columns or doing "and" or "or" filtering.

I would think that something like this would have been done already. I know HTML5 got started down this path but then hit a roadblock. I just need basic queries, no joins or anything. Does anyone know of something that can do this? Thanks.

Edit: I think I should include a use case to help clarify what I'm looking for.

For example, I have a list of the 5000 largest cities in the US. Each record include Cityname, State, and Population. I would like to be able to download the entire dataset once and populate a JS array with it then, on the client side only, be able to run queries like the following and create a table from the resulting records.

• Ten largest cities in California
• All cities that start with "S" with populations of 1,000,000 or more.
• Largest three cities in California, New York, Florida, Texas, and Illinois and order them alphabetically by state then by population. i.e. California, Los Angeles, 3,792,621; California, San Diego, 1,307,402; California, San Jose, 945,942...etc.

All of these queries would be trivial to do via SQL but I don't want to keep going back and forth to the server and I also want to allow offline use.

Answer 1

Take a look at http://linqjs.codeplex.com/

It easily meets all your requirements.

Answer 2

As long as the data can fit in memory as an array of objects, you can just use sort and filter. For example, say you want to filter products. You want to find all products either below $5 or above $100 and you want to sort by price (ascending), and if there are two products with the same price, sort by manufacturer (descending). You could do that like this:

var results = products.filter(function(product) {
    // price is in cents
    return product.price < 500 || product.price > 10000;
});
results.sort(function(a, b) {
    var order = a.price - b.price;
    if(order == 0) {
        order = b.manufacturer.localeCompare(a.manufacturer);
    }
    return order;
});

For cross-browser compatibility, just shim filter.

Answer 3

Try Alasql.js. This is a javascript client-side SQL database.

You can do complex queries with joins and grouping, even optimization of joins and where parts. It does not use WebSQL.

Your requirements support:

• Wide browser compatibility - all modern versions of browsers, including mobiles.
• Can sort on more than one column.- Alasql does it with ORDER BY clause.
• Can filter results. - with WHERE clause.
• Must work completely client side so the user only needs to download a large set of data once and can cut the data however they want without constantly fetching data from the server and would in fact be able to do all queries offline after the initial pull. - you can use pure JavaScript (Array.push(), etc.) operations to modify data (do not forget to set table.dirty flag).

Here is a simple example ( play with it in jsFiddle ):

// Fill table with data
var person = [ 
    { name: 'bill' , sex:'M', income:50000 },
    { name: 'sara' , sex:'F', income:100000 },
    { name: 'larry' , sex:'M', income:90000 },
    { name: 'olga' , sex:'F', income:85000 },
];

// Do the query
var res = alasql("SELECT * FROM ? person WHERE sex='F' AND income > 60000", [person]);