jQuery each() finish outer function after the end of iterations

Question

I have a function that needs to loop through all the select tags and the cheackboxes, take their name and value and then assign it to the "data" object. Here's the code

data_query:->      
  data = {}
  $('input[type="checkbox"]').each ->
    data[$(this).attr('name')] = $(this).is(":checked")
  $('select').each ->
    data[$(this).attr('name')] = $(this).val()
  # console.log data
  return data

Result should be something like:

Object {select_one: "value", select_two: "value", ag_1: false, ag_2: true, ft_1: false, ft_2: false, bg_1: false}

But What I get at the end is:

Object {select_one: "value", select_two: "value", ag_1: false} #it gets only one checkbox

I understand the nature of callbacks and I know why it happens - the outer funcion ends before the end of the inner loops but I have no idea how to solve this

Thanks!

Edit: here is the HTML. Its just simple select tags and checkboxes

      <li><label for="ag_1"><input name="ag_1" type="checkbox" id="ag_1"> AG-1</label></li>
      <li><label for="ag_2"><input name="ag_2" type="checkbox" id="ag_2"> AG-2</label></li>
      <li><label for="ft_1"><input name="ft_1" type="checkbox" id="ft_1"> FT-1</label></li>
      <li><label for="ft_2"><input name="ft_2" type="checkbox" id="ft_2"> FT-2</label></li>
      <li><label for="bg_2"><input name="bg_1" type="checkbox" id="bg_2"> BG-1</label>    </li>

<!-- there's a bunch of these -->
<select name="select_one" id="select_one">
      <option value="">-- Select One --</option>
      <option value="ac_1">AC-1</option>
      <option value="ac_2">AC-2</option>
      <option value="ac_3">AC-3</option>
      <option value="ac_4">AC-4</option>
      <option value="ac_5">AC-5</option>
      <option value="ac_6">AC-6</option>
      <option value="ac_7">AC-7</option>
</select>

Since `$.each` callbacks are executed synchronously, overwriting the closed over variables is not an issue here. The outer function does not end before the inner one — John Dvorak, Jul 09 '13 at 18:43
If I console.log inside the .each(), the data object gets all the name:values as expected, so why it gives only on checkbox when returning the data from the outer function? — DanielRavina, Jul 09 '13 at 18:51
it stops iterating once false is evaluated. Try checking all boxes and you'll see what I mean — zgr024, Jul 09 '13 at 18:57
@JanDvorak Your fiddle returned returned only one checkbox. The select tags should have different names (i.e. different keys in the data object) — DanielRavina, Jul 09 '13 at 18:58
So how do I override the implicit return? if false then continue ? — DanielRavina, Jul 09 '13 at 19:00

score 2 · Accepted Answer · answered Jul 09 '13 at 19:00

The problem is that CoffeeScript implictly returns the value you're assigning to the data property. Yet, the jQuery each does consider a return value of false as a break, and ends the loop. You have to return undefined "explicitly":

data = {}
console.log $('input[type="checkbox"]').each ->
  data[$(this).attr('name')] = $(this).is(":checked")
  return
$('select').each ->
  data[$(this).attr('name')] = $(this).val()
  return
return data

(Demo at jsfiddle.org, produced code)

jQuery each() finish outer function after the end of iterations

1 Answers1