Linq in JavaScript

4 Mar

If you are familiar with .NET, then you may know what Linq is: Language Integrated Query. It is a way to query databases or objects. If you have read my blog posts, you will notice that I like to iterate through JSON with if something equal something statements to filter and query my data. In this tutorial, I will show you how to use linq for JavaScript to make queries easier.

The Application

I am going to use Linq.js to process the results of a query to an ESRI REST endpoint.

Capture

Nothing much to see in the image above, just three points with their location type as a popup. It is the logic behind them that is useful. These three points were filtered out from a total of 844. I used the Albuquerque Public Art Data for this example.

The Logic

The map is a standard Leaflet.js map. I made a query to the Albuquerque Public Art endpoint using where set to 1=1. This gives back all the data. I know we can query here, but let’s assume that we are going to provide buttons for the user to filter data and we don’t want to keep querying the service. We grab once and can filter multiple times on any field.

The AJAX query is standard and returns our result.

var url=”http://coagisweb.cabq.gov/arcgis/rest/services/public/PublicArt/MapServer/0/query”;
var params = ‘where=1=1&f=json&outFields=*&outSR=4326’;
var http;
http=new XMLHttpRequest();
http.open(“POST”, url, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
result=JSON.parse(http.responseText);
}}
http.send(params);

We can use linq.js after we convert the response to JSON.

var r = Enumerable.From(result.features)
.Where(function (x) { return x.attributes.OBJECTID > 202261 })
.OrderBy(function (x) { return x.attributes.LOCATION })
.Select(function (x) { return x.attributes.OBJECTID + ‘,’ + x.attributes.LOCATION +’,’+ x.geometry.x + ‘,’ + x.geometry.y })
.ToArray();

The above code does several things.

First, we create the enumerable object from the JSON. When using ESRI JSON, you need to skip to the features or it will rarely parse. Next we select our where clause. The json has two properties that contain the rest (nested): attributes and geography. We take x from the function and then look for items with the attribute for OBJECTID greater then 202261. This gives me three results.

I then order the results by location – for no real reason other than to show it is possible. Then using select, I format the string that will be placed in the returned toArray(). The result is:

[“202263,Academy Hills Park,-106.52671900037603,35.149523000339606”, “202264,Alamosa Park,-106.70765700015008,35.07113600016852”, “202262,City/County Government Building,-106.65203299975377,35.088040999684026”]

Now I have a subset of my data. I can map it:

 for(x=0;x<r.length;x++){
data=r[x].split(“,”);
L.marker([data[3],data[2]]).addTo(map).bindPopup(data[1]);
}

If you want to allow a user to play with some data, grab it all and use linq.js to filter, order and select subsets and only call the server once.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: