I’m often confronted with the need to take a collection of values and transform them into a different set of values. For example, I want to use Twitter’s search API to get a list of tweets on a certain topic. However, I am only interested in retrieving the URLs to the home pages of each Twitter user returned in the result set. I might use jQuery’s JSONP implementation to call the web service and parse the results with the following JavaScript:

$.ajax({
    url: 'http://search.twitter.com/search.json?q=telerik',
    dataType: 'jsonp',
    success: function(data) {
        var userUrls = [];
        var count = data.results.length;
        for (var i = 0; i < count; i++) {
            var url = 'http://twitter.com/' + data.results[i].from_user;
            userUrls.push(url);
        }
        // ...
    }
});

Using jQuery’s $.map() utility, transforming the results on the client becomes even more trivial.

$.ajax({
    url: 'http://search.twitter.com/search.json?q=telerik',
    dataType: 'jsonp',
    success: function(data) {
        $.map(data.results, function(result) {
            return 'http://twitter.com/' + result.from_user;
        });
        // ...
    }
});

Both approaches have the same result, an array containing URLs to Twitter user account home pages, but the second is more elegant and a bit more terse.

If I really wanted to tighten things up, I could do it all in a single line of code.

$.map(data.results, function(result) { return 'http://twitter.com/' + result.from_user; });

The $.map() function takes two arguments: an array of values and the function used to map each element in the array to a new value in the resulting array. The function provided to $.map() is passed two parameters, the array element being transformed and its index value in the array. I didn’t use the index value in the previous example, but it’s there if you need it. Check out jQuery’s official documentation of the function for more details.

A real-world example

One great example of where this utility might come in handy is with Telerik’s RadGrid for ASP.NET AJAX. The other day I was working on a project that utilizes the RadGrid’s client-side data binding capabilities and wanted to be able to quickly retrieve an array containing the values of every selected item’s ID whenever the grid’s client-side RowSelected event is fired. I pass the IDs to a Silverlight chart, which uses them to call a web service and retrieve contextual data to display about the selected items.

I’ve done this sort of thing many times before, and my initial instinct was to take the same approach I always have:

var rowSelected = function(sender, args) {
    var tableView = args.get_tableView();
    var items = tableView.get_selectedItems();

    var ids = [];
    var count = items.length;
    for (var i = 0; i < count; i++) {
        var dataItem = items[i].get_dataItem();
        ids.push(dataItem.ID);
    }

    // pass IDs to Silverlight chart
}

But when I remembered the jQuery $.map() function I was able to replace the previous implementation with the following, which I find to be easier to implement, ready, and use.

var rowSelected = function(sender, args) {
    var tableView = args.get_tableView();
    var items = tableView.get_selectedItems();
    var ids = $.map(items, function(item) {
        return item.get_dataItem().ID;
    });
}

Final Thoughts

There’s really not much else to say. The $.map() function is straight-forward and easy to use, and it’s just another reason I love to use the jQuery library.

I created a simple demo using the RadGrid and Northwind data to demonstrate how to extract selected items on the client using this function.

Enjoy!

[Source: C#]