Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using Underscore.js for data manipulation

Monday, March 6th, 2017 by Servage

Screen Shot 2017-01-25 at 10.49.29Underscore is helper library written in JavaScript to make data manipulation easier. One of the most useful features in Underscore is iterating over collections like arrays and JSON objects. It makes working with data much simpler. Furthermore, Underscore can be used as a simple JavaScript template engine.

Manipulating Data

Let’s go through some common functions provided by the Underscore library for working with basic data. The first one is filter(). We can use this function to filter data from a collection, such as an array. Consider an example where we have a list of user ages. We want to find out how many of the users are over 50. Here is how easy it is with Underscore: var agesOver50 = _.filter([15, 62, 41, 58, 72, 24], function(age) { return age > 50; } ). This will result in an array with three elements containing the ages as integers. The underscore character is an object that is the library itself, much like the dollar sign in jQuery.

Next comes the every() function that allows us to verify that all elements inside a collection meet a certain condition, for example that all API keys generated by a user are at least 64 characters long: _.every(['api', 'keys', 'here'], function(apiKey) { return apiKey.length >= 64; } ). To check if at least one value matches meets the requirement, the some() function can be used instead. It works exactly the same way.

Underscore also provides some handy helper functions, such as _.first() and _.last() to get the first and last values from an array so you don’t have to calculate the last index using Array.prototype.length. Speaking of indexes, the last function we will cover is _.rest(). It takes an array and the index after which you want to retrieve all elements as arguments, such as: _.rest([‘foo’, ‘bar’, ‘baz’], 1). This returns [‘bar’, ‘baz’].

Templates with Underscore

In addition to what we have seen so far, Underscore also works as a template engine. The templates work like in many other template engines: you have a template with HTML tags and a collection of data to send to the template.

Here is a small template as an example: var template = ‘Welcome back, <%= username %>’. We need a way to replace the variables with real data. We can do this with a JSON object: var data = { ‘username’: ‘JohnDoe’ }. To merge the data with the template, we can compile it using the template() function: var compiledTemplate = _.template(template, data). As you probably expected, the compiledTemplate variable now contains the string “Welcome back, JohnDoe”.

Now that you have an idea of what Underscore can be used for, let’s quickly see how you can add it to your website. The only thing you will need is the .js file from www.underscorejs.org. As always, include the file using a <script> tag. Alternatively, you can use a CDN link from www.cdnjs.com or any other CDN provider.

Using Underscore.js for data manipulation, 4.0 out of 5 based on 3 ratings
Categories: Software & Webapps

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.