Setting up an array with jQuery .each() function?

Question

I'm trying to set up an array through jQuery's .each() function, but it seems like I'm not properly doing it?

I have attributes in the html such as:

<div class="cheers" data-fname = "fname" data-lname="lname">some ish..</div><!-- going through a while loop!-->

Then I have a jquery function that does something like this

var arrayMe = [];
$(".cheers").each(function(index){
    arrayMe[index] = $(".cheers").attr('data-fname')+","+$(".cheers").attr('data-lname');
});

Then, when I try to do various alerts:

alert(arrayMe); //this gives me the fname,lname
alert(arrayMe[0]); //this gives me the first fname,lname in the array
alert(arrayMe[0][1]); //this SUPPOSED to give me the first lname, but it gives me a letter...

Rob W · Accepted Answer · 2012-02-04 21:23:55Z

6

You have to use arrayMe[1] instead of arrayMe[0][1].

You get a letter, because arrayMe[0] is a string, and arrayMe[0][1] retrieves the second character of the given string. It's equivalent to arrayMe[0].charAt(1).

If you want to build a 2D array, use:

var arrayMe = [];
$(".cheers").each(function(index){
    var $this = $(this);
    arrayMe[index] = [$this.attr('data-fname'),
                      $this.attr('data-lname')];
});
alert(arrayMe);        // Array. Shows all pairs, eg: [['fname', 'lname'], ...]
alert(arrayMe[0]);     // Array. Shows first pair, eg: ['fname', 'lname']
alert(arrayMe[0][0]);  // String. fname            eg:  'fname'
alert(arrayMe[0][1]);  // String. lname            eg:           'lname'

(I have also fixed another issue in your code by replacing $('.cheers') with $(this))

edited Feb 4, 2012 at 21:23

answered Feb 4, 2012 at 21:18

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

Comments

ori · Accepted Answer · 2012-02-04 21:22:49Z

1

If you want to access fname and lname separately, put them in an array:

var arrayMe = [];
$(".cheers").each(function(index){
    arrayMe[index] = [$(this).attr('data-fname'),$(this).attr('data-lname')];
});

Also, $(this).attr will give you the attribute of the current element, where $(".cheers").attr will always give you the attribute of the first element

answered Feb 4, 2012 at 21:22

ori

7,8471 gold badge29 silver badges32 bronze badges

Comments

Community · Accepted Answer · 2013-05-17 16:24:41Z

1

What about this:

var arrayMe = $(".cheers").map(function() {
    return [[ $(this).data('fname'), $(this).data('lname') ]];
}).get();

See squint's comment for explanation why double return-array needed.

edited May 17, 2013 at 16:24

CommunityBot

11 silver badge

answered Feb 4, 2012 at 21:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

4 Comments

user1106925 Over a year ago

.map() has a strange quirk where if you return an Array, instead of being added to the Array being built, it instead is concatenated into it. To overcome this, you need to wrap the return value in yet another Array so that that's the one that gets concatenated. return [ [ ..., ... ] ];

dfsq Over a year ago

Wow! this is interesting. Just tested and you are right!! Thank you, I didn't know about that.. now looking into jQuery source code, interesting..

Rob W Over a year ago

Additionally, .map returns a jQuery object. To convert it to an array, you have to add .toArray() in the end.

user1106925 Over a year ago

FYI, here's a bug report. They have no intention of fixing it. .map was an internal use function that they decided to expose irrespective of a few things that are unexpected for .map. Unfortunte. +1 though.

Pluckerpluck · Accepted Answer · 2012-02-04 21:20:49Z

0

From what I can see you are not adding the values into an array, but instead into a string which is being stored in arrayMe[index].

Try using when storing into the array to achieve what I believe you want:

var arrayMe = [];
$(".cheers").each(function(index){
    arrayMe[index][0] = $(".cheers").attr('data-fname');
    arrayMe[index][1] = $(".cheers").attr('data-lname');
});

answered Feb 4, 2012 at 21:20

Pluckerpluck

7316 silver badges21 bronze badges

Comments

Ricardo Souza · Accepted Answer · 2012-02-04 21:21:32Z

0

You will have to change your code to:

arrayMe[index] = [$(".cheers").attr('data-fname'), $(".cheers").attr('data-lname')];

answered Feb 4, 2012 at 21:21

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Collectives™ on Stack Overflow

Setting up an array with jQuery .each() function?

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related