What is use of $.map function in javascript?

Question

Note: I just want to to understand what is $.map doing in following code..

I am working on openstack horizon,In one of the javascript file they are using $.map function Please seehorizon.d3linechar.js

My question is how $.map is works, what is $ before map. $.map is associated with javascript or jquery..

$.map(self.series, function(serie) {
        serie.color = last_point_color = self.color(serie.name);
        $.map(serie.data, function(statistic) {
          // need to parse each date
          statistic.x = d3.time.format.utc('%Y-%m-%dT%H:%M:%S').parse(statistic.x);
          statistic.x = statistic.x.getTime() / 1000;
          last_point = statistic;
          last_point.color = serie.color;
        });
      });

$ is a "shortcut" for jQuery - to see HOW $.map works, look at the jQuery source code - github.com/jquery/jquery ... $.map is a jQuery function written in javascript - so - associated with both I guess — Jaromanda X
– Jaromanda X, Commented Jul 23, 2015 at 4:37
That is an inappropriate use of the map function, because neither callback returns a value, nor is the result of $.map() used. So in that code it is just acting the same as an .each() loop. — nnnnnn
– nnnnnn, Commented Jul 23, 2015 at 4:41
@JaromandaX $ is not always the alias for jQuery (but in this case, it is jQuery). There are other libraries use $ too. e.g. Prototype — Rick Su
– Rick Su, Commented Jul 23, 2015 at 4:46
@Neverever I just want to to understand what is $.map doing in mentioned code — geeks
– geeks, Commented Jul 23, 2015 at 4:47

Michael W. Czechowski · Accepted Answer · 2015-07-23 05:18:12Z

1

Please read the jQuery documentation. Their are many many examples. Our folk is realy trying to help you. But what is the lack of your understanding in the $.map() function?

$ is only the namespace and makes at least the map function work. So forget about it.

map( input, outputFunction ) is iterating through the input which has to be an real array. The outputFunction, usually a self executing function, is able to manipulate the content of each element of the inputed array.

In your example:

$.map(self.series, function(serie) {

self.series is the input and each element of that array will be called as serie in the anonymous or rather self executed function.

serie.color = last_point_color = self.color(serie.name);

Change some color stuff...

$.map(serie.data, function(statistic) {

Next call of the mapping function.

  // need to parse each date
  statistic.x = d3.time.format.utc('%Y-%m-%dT%H:%M:%S').parse(statistic.x);

Parsing the date to a specific format like discribed in the comment.

  statistic.x = statistic.x.getTime() / 1000;

Take the x value parse to a time or maybe to seconds and divide through 1000.

  last_point = statistic;

Save element of serie.data to a temporar variable.

  last_point.color = serie.color;

Save the color of the of the serie to the element of that serie.

    });
  });

All in all... ... $.map() iterates through self.series, then iterates through its children and then it looks like it changes the color of every single element to the color of that series.

answered Jul 23, 2015 at 5:18

Michael W. Czechowski

3,4452 gold badges26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael W. Czechowski Over a year ago

Thank you. I really appriciate, but at least my friend: Get familiar with the documantations. Every good programer puts lots and lots effort into his or her own documentation. Don't forget, that the most time of our work we are spending while reading and trying to understand the sourcecode ;)

AmmarCSE · Accepted Answer · 2015-07-23 04:45:57Z

0

$ is an alias for the jQuery object.

As for map(), it is an api function in jQuery used to convert the items in an array.

If you look at the source for map, the basic algorithm is to iterate over the passed in elems and obtain a converted value using the callback

function (elems, callback) {
    var value, i = 0,
        length = elems.length,
        ret = [];

      for (; i < length; i++) {
      //alternatively, for objects,  for (i in elems) {
            value = callback(elems[i], i);

            if (value != null) {
                ret.push(value);
            }
        }
    // Flatten any nested arrays
    return concat.apply([], ret);
}

edited Jul 23, 2015 at 4:45

answered Jul 23, 2015 at 4:37

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

9 Comments

geeks Over a year ago

@JaromandaX I just want to to understand what is $.map doing in mentioned code

nnnnnn Over a year ago

In the code shown in the question no actual mapping takes place. It's just being used as a looping mechanism. It's poor coding.

AmmarCSE Over a year ago

@nnnnnn, I concur. On the face, it seems that no effect is taking place. It cant be told for sure without seeing more code because it may be some sort of custom inner implementation of map? Idk...

AmmarCSE Over a year ago

@nnnnnn, it seems they are indirectly manipulating the array properties with ` statistic.x = ....`. But yes, this seems like poor coding practices

nnnnnn Over a year ago

Yes, I'm not saying it wouldn't work as a looping mechanism to change properties of the nested objects. Just that $.each() would be a much better choice if all they want is a loop.

|

Collectives™ on Stack Overflow

What is use of $.map function in javascript?

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related