How to write SQL-like queries in JavaScript

author-image
CIOL Bureau
Updated On
New Update

BANGALORE, INDIA: When doing development on .NET framework using Visual Studio 2008, you must have used LINQ (Language INtegrated Query). The language allows standard query operations to be integrated onto the .NET platform, to provide a unified way to query across objects, databases, and XML in a standard way. This enables developers to use query style syntaxes in their codes while referring to objects or datasets.

Advertisment

The whole process makes writing code for fetching values from an object list easier. A developer doesn't have to write iterations to parse through the object list, but rather get the work done in SQL query format. Till recently, the same wasn't possible for Java developers.

Using JSINQ, however, you can write similar SQL queries while programming in JavaScript. This means you now have a query language in JavaScript that you can use against arrays and DOM node lists. As LINQ has reduced the need to write lesser code and provides simplicity in code management, the same would now be possible with JSINQ for JavaScript related development.

Key features
JSINQ is a JavaScript library, that you can use to implement LINQ style querying for JavaScript codes. The acronym, JSINQ stands for JavaScript INtegrated Query, which is a complete implementation of LINQ to objects in JavaScript, which means that JSINQ is implementation of LINQ's System.Linq.Enumerable and also has a complete query-expression compiler that translates SQL-style queries into JavaScript code. JSINQ is a result of a project started by Kai Jager and is available for download from CodePlex.
Advertisment

By using JSINQ you can not only use it against arrays in JavaScript, but can be used for writing complex queries find elements in the HTML DOM tree nodes. It can also be used to create HTML elements dynamically from JSON or XML that have been passed forward via XMLHttpRequest in a more declarative manner, rather than writing long iterative codes. Using JSINQ can be extended to other JavaScript based frameworks like Ajax as well.

You can start using JSINQ by downloading the JSINQ library from the Codeplex site ( link provided in the direct-hit box), and when you extract the contents of the zipped archive file you will find two JavaScript files, namely "jsinq-enumerable.js? and "jsinq-query.js".

The jsinq-enumerable is the module that implements the System.Linq. Enumerable of LINQ from .NET framework in JavaScript, while the other module, jsinq-query is the implementation in JavaScript for System.Linq.Queryable and is the query-expression compiler. These are the two JSINQ files that you need to include in your HTML page to implement LINQ style querying for objects while writing coding in JavaScript.

Advertisment

 

Implementing JSINQ
If you want that your developers can write the JavaScript code in a more declarative manner as LINQ, then you can use JSINQ in your project. Once you have downloaded the JSINQ library, and extracted it, you have to use the jsing-enumerable.js and jsinq-query.js JavaScript files, and include them in all HTML pages where JavaScript shall be used.

These two JavaScript files can be found in the build folder of the JSINQ extracted zipped file. In the same folder, you can also find sample programs as well along with the source files. To implement JSINQ for JavaScript in your project, just copy the two JSINQ files into your project's web directory, where all your HTML pages are located, and in the code of the web page you can include the files as follows:

Advertisment

src="jsinq-enumerable.js">
src="jsinq-query.js">

JSINQ lets you create enumerables from arrays or DOM node lists, and for that you can use jsinq.Enumerable, which is the JavaScript implementation of its counterpart's System.Linq. Enumerable. To demonstrate how we use use JSINQ to create enumerables from arrays and how we can do SQL-style querying on those, we will make an array of customer names. Then we create its enumerable object using jsinq.Enumerable. On the enumerable object we will enumerate for a condition that will list all customer names starting with alphabet 'A'.
With jsinq. Enumerable we can write queries using query methods defined in Enumerable constructor, for example the where() method. The following code snippet shows this:

document.writeln('Customers names starting with A: ');

Advertisment

var customer = <'Raman', 'Aman', 'Popat', 'Kamal', 'Ankur', 'Manpreet', 'Sandy', 'Samit'>;
var enumerable = new jsinq.Enumerable(customer);
var customerNamesWithA =
enumerable.where(function(customer)
{
return name.charAt(0) == 'A';
}
);

var enumerator = customerNamesWithA.getEnumerator();
while (enumerator.moveNext()) {
var name = enumerator.current();
document.write(name + '
');
}

Enabling SQL-style queries
With Enumerable constructor you have to use query methods, but to write queries in SQL-like format, JSINQ provides with jsinq.Query constructor. Using this constructor, you can do SQL-like programming in JavaScript. The following code snippet demonstrates how you can query on the same customer array and the customer enumerable used in the previous example and fetch the names of customers having alphabet 'a' in their names.
document.writeln('Customers having A in their names: ');

Advertisment

var query = new jsinq.Query(' \
from customer in $0 \
where customer.toLowerCase().indexOf("a") > -1 \
orderby customer descending \
select customer \
');
query.setValue(0, enumerable);
var result = query.execute();
var enumerator =
result.getEnumerator();
while (enumerator.moveNext()) {
var name = enumerator.current();
document.write(name + '
');
}

Here JSINQ's query constructor compiles the SQL-style query received as string and converts it into a JavaScript code. The JSINQ query object acts like a prepared statement, so when you create the query it isn't executed. This way you can use the same query over and over again without recompiling it. That is why placeholders like $0 are used instead of regular expressions. Now using the setValue() method you can assign our enumerable to the placeholder $0. To execute the query we use the execute() method. The variable result will have the enumerable returned from executing the query on our supplied customer enumerable that we have specified in the setValue() method.

Having gone through the above code samples, you would now appreciate how JSINQ eases the work of developers by requiring them to write less code in a more declarative manner, while programming in JavaScript; thanks to the LINQ style querying capability. We shall explore more such tools in the coming issues.

tech-news