Create JS array from input field values

Question

I have x number of input fields with class='agency_field'. How can I create a JS array that contain the values of all fields with this class?

Using jQuery, this gives a syntax error:

$(".agency_field").each(function(index) { agencies[] = $(this).val(); });

• McStretch: Holy @#%# - you just got 6 answers within a minute of each other.
• stef: Hard to beat SO response times!
• Šime Vidas: LOL Five each() answers, and only one map() answer...
• McStretch: @Šime - I'm not sure how well-known map() is. each() is seen all over the place and it's easy to use (more familiarity). I gave this karim's answer +1 though because the documentation says map() is especially useful for this scenario.
• McStretch: That being said, where's the love for the each() answers? They're still acceptable answers, and more readable IMHO.

Answer 1

You can use .map instead, which is perhaps more suited to your purpose:

var values = $(".agency_field").map(function() {
 return this.value;
}).get();
alert(values.join(","));

• James South: @karim79: Never seen this before... Interesting approach. How does this compare speed wise to each/push? Time for some api reading methinks..
• Šime Vidas: @karim No need for .join(","). When arrays coerce to strings, the commas are added by default.
• karim79: @James South - I can't imagine there would be any perceptible difference in performance for a typical application. I use it because it was literally designed for sucking properties out of collections in a concise manner, as the manual says: "The .map() method is particularly useful for getting or setting the value of a collection of elements."
• karim79: @Šime Vidas - I know, I put it there to highlight that what we're getting is an array.
• James South: @karim: Qood to know. Cheers!

Answer 2

var agencies = [];
$(".agency_field").each(function(index) { agencies.push($(this).val()); });

• McStretch: @stef, you shouldn't choose the first answer. You should choose the best answer - which in this case is karim's by vote count.

Answer 3

You're creating a new array for each iteration. Try instead instantiating an array before the each call and adding to the array each iteration.

Answer 4

var arr = []; $(".agency_field").each(function(index) { arr.push($(this).val()); });

arr would contain what you want in the end.

Answer 5

Your code shd be slightly changed to:

var agencies = [];
$(".agency_field").each(function(index) { 
 agencies.push($(this).val()); 
});

Answer 6

You need to create an array initially and then add each value to that array:

var agencies = [];
$(".agency_field").each(function(index) { agencies.push($(this).val()) });

Answer 7

You're quite used to a language like php? ;) In Javascript, you'd use array.push() for appending to an array; so

$(".agency_field").each(function(index) { agencies.push( $(this).val() ); });