How to looop through a jQuery element array and access data?

Question

I am using jQuery 1.7.2.

I have three checkboxes each with a unique company id. When one box is checked, I want to make a list of company ids created from the boxes that are checked.

<input type='checkbox' class='Company' data-companyid='1'> 1<br>
<input type='checkbox' class='Company' data-companyid='2'> 2<br>
<input type='checkbox' class='Company' data-companyid='3'> 3<br>

// SET BY CLASS
$Company = $("input.Company");

// GET COMPANY LIST 
function getCompanyList() {
    var len = $Company.length;
    for (i = 0; i < len; i++) {
         var CompanyID = $Company[i].data("companyid");
         alert(CompanyID);
    }
}
$Company.change(getCompanyList);

For some reason, I am having trouble accessing the company id via the data method in the loop. I have lots of examples of my own code where I do this sort of thing, but I can't get this one work.

What am I missing?

http://jsfiddle.net/Msc95/

`$Company[i]` gets the HTMLElement, you should be using `$Company.eq(i)`. And the code in your jsFiddle is quite different from what you posted here... — MrOBrian, Aug 24 '12 at 19:05

Alnitak · Accepted Answer · 2012-08-24T19:11:41.010

2

You're not accumulating the individual company ID's into any sort of data structure.

The easiest way to return an array of values from an array of (checked) elements is to use jQuery's .map function:

function getCompanyList() {
    var companyList = $Company.filter(':checked').map(function() {
       return $(this).data('companyid');
    }).get();
    alert(companyList);
}

The .get() call is necessary to turn the result of .map() into a plain array.

See http://jsfiddle.net/alnitak/zfUXj/

edited Aug 24 '12 at 19:11

answered Aug 24 '12 at 18:57

Alnitak

334,560
70
407
495

I have never used the map method. That looks really easy though. – Evik James Aug 24 '12 at 18:59
1

@EvikJames FYI - `map` comes from functional programming languages such as LISP and Haskell. It transmogrifies one array into another array, by applying the supplied function to each element of the original array. – Alnitak Aug 24 '12 at 19:18

score 2 · Answer 2 · edited Aug 24 '12 at 19:06

2

Why not something like this, and put them in an array?

var checkedCompanys = new Array();
 $('input.company:checked').each(function() {
     checkedCompanys.push($(this).data("companyid"));    
  });

Good luck

edited Aug 24 '12 at 19:06

Roko C. Buljan

196,159
39
305
313

answered Aug 24 '12 at 19:03

maxijb

541
4
13

2

this is exactly what `.map()` is designed for - no need for `push` – Alnitak Aug 24 '12 at 19:05
1

@Roko you've unnecessarily re-evaluated the selector instead of re-using `$Company` – Alnitak Aug 24 '12 at 19:12
Good explanation on why to use []... I'll try map and get too. Thanks – maxijb Aug 25 '12 at 00:22
+1 @Alnitak :) my bad! http://jsfiddle.net/aGZCG/1/ I used initially `[]` (Cause I always do, but re-copying the code I forgot to change to it) – Roko C. Buljan Aug 25 '12 at 06:08

How to looop through a jQuery element array and access data?

2 Answers2