How to get current index in Array prototype map?

Question

I'm using Array.prototype.map.call to store in an array a bunch of node list objects:

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) {
         return {
             rectangle: e.getBoundingClientRect();
         }
    }
}

However, I also want to store the order in which this elements appear in the DOM, and I don't know how to do that.

I know that I'm storing this in an array, and the order would be the index of the array. For example:

var listings = getListings();
console.log(listings[0]); // rank #1
console.log(listings[1]); // rank #2
// etc...

but I'm inserting the json object in a database, and the easiest way to store the "rank" information is by creating a property "rank" in my object, but I don't know how to get the "index" of the current array.

Something like:

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) {
         return {
             rectangle: e.getBoundingClientRect(),
             rank: magicFunctionThatReturnsCurrentIndex() // <-- magic happens
         }
    }
}

Any help pointing me to the right direction will be greatly appreciated! Thanks

I think document.querySelectorAll('li.g') should return elements right in the correct order, i.e. how they appear in DOM. — VisioN
– VisioN, Commented Nov 15, 2013 at 14:47
Yes it does, but is there any way to get the numerical value? I have the elements in the current order, but I want to have an attribute in my JSON object with its numerical value. — ILikeTacos
– ILikeTacos, Commented Nov 15, 2013 at 14:48

Felix Kling · Accepted Answer · 2016-12-23 01:12:30Z

22

The MDN documentation says:

callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

So

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e, rank) { // magic 
         return {
             rectangle: e.getBoundingClientRect(),
             rank: rank // <-- magic happens
         }
    }
}

edited Dec 23, 2016 at 1:12

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Nov 15, 2013 at 15:00

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

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

1 Comment

ILikeTacos Over a year ago

I read that page over and over, and for whatever reason I never noticed that the index was also being passed. Thanks!

Collectives™ on Stack Overflow

How to get current index in Array prototype map?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related