CODEWITHSUNDEEP
jquery
oshirowanen
oshirowanen

Reputation: 15925

Can someone please explain .map() in laymans terms?

UPDATE 1:

Here is more of the script:

$(".favorites").sortable(
    {update:function() {

    var that = this;

    var urls = ""; 
    var texts = "";

    $.map($(".favorites a"), function(elt) { 
        urls += "url=" + elt.href + "&";
        texts += "text=" + $(elt).html() + "&"; 
    }); 

    $.ajax({
        url: 'favorites.asmx/save',
        type: 'POST',
        data: { strItems:$(that).sortable("serialize",{key:'item'}), strURLs:urls.substr(0,urls.length - 1), strTexts:texts.substr(0,texts.length - 1) },
        error: function(xhr, status, error) {
                    console.log(xhr.responseText); 
        },
        success: function() {
            console.log("Values sent:- strURLs: " + urls.substr(0,urls.length - 1));
        }
    });

ORIGINAL QUESTION:

I have the following script which works, but I don't understand it:

$.map($(".favorites a"), function(elt) { 
    urls += "url=" + elt.href + "&";
    texts += "text=" + $(elt).html() + "&"; 
});

I understand the basic examples in this link: http://api.jquery.com/jQuery.map/, but I don't understand the script I have posted above.

Upvotes: 2

Views: 308

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074276

The purpose of map is to create an array by taking each of the elements of the array or object you pass into it and filtering them through the function you give it; the function's return values are collected together into the resulting array, which is the return value of map.

That code isn't doing that. It's not returning anything from the iterator, and it's not using the resultant array. Basically it's just re-invented .each by abusing map. That script should be:

$(".favorites a").each(function() { 
    urls += "url=" + this.href + "&";
    texts += "text=" + $(this).html() + "&"; 
});

(Note that I'm assuming here that urls and texts have been declared and initialized prior to the code you quoted.)

Here's an example of a correct use of map:

var hrefs = $.map($(".favorites a"), function(elt) {
    return elt.href;
});
// hrefs is now an array containing the `href`s of all of the links

Upvotes: 5

Shadow Wizard
Shadow Wizard

Reputation: 66389

The code you have is taking all the links (<a> tags) from container with class called "favorites" and build two strings: one is the target URL's of the links and the second is the text "inside" each link.

From the looks of it, those two strings are then sent to the server.

As T.J. Crowder perfectly explained, you don't have to use .map() at all, the fact it's working does not mean it's correct or best practice.

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245419

map() turns an array into another array by using the function passed to it on each element of the source array:

var source = [ 1, 2, 3, 4 ];

var result = $.map(source, function(element){
    return element.toString() + " Rocks!";
});

// result now contains [ '1 Rocks!', '2 Rocks!', '3 Rocks!', '4 Rocks!' ]

In the use case you show, map() is actually the wrong method to call since there's no resulting array (the function doesn't return anything). This usage simply uses map() to iterate over the collection and do something unrelated with the elements.

In that case, you should really use each() to simply iterate over the source array and do something with each element.

Upvotes: 0

El Guapo
El Guapo

Reputation: 5781

Basically, the $.map iterates through an existing array, passes it to the callback you provide ("function", above), then it takes those new items that were returned from your callback and puts them into a brand-spanking-new array.

Upvotes: 1

Related Questions