Javascript - undefined variable in each

Question

Helo, i'm trying save to array or object data with checked checkboxes, but still it return me error. I don't know why, because i defined a variable before a each.

My code is here:

$( ".drinks input" ).change(function() {
  var others = [{}];
  $('.drinks input:checked').each(function (i) {
       others[i]['id'] = $(this).val();
       others[i].quantity = 1;
  });
  console.log(others);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drinks">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>

Can you help me plese how can I right define a array? Thank you so much.

You can probably solve this on your own using DevTools and stepping though the code. — evolutionxbox
– evolutionxbox, Commented Mar 27, 2017 at 9:41
You have to initialise a property before setting its property. Try others[i] = others[i] || {} — Rajesh Dixit
– Rajesh Dixit, Commented Mar 27, 2017 at 9:41

Satpal · Accepted Answer · 2017-03-27 09:43:13Z

2

You need to create object, then set its property

others[i] = {}

$(".drinks input").change(function() {
  var others = [];
  $('.drinks input:checked').each(function(i) {
    others[i] = others[i] || {}
    others[i]['id'] = $(this).val();
    others[i].quantity = 1;
  });
  console.log(others);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drinks">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
  <input type="checkbox" value="3">
</div>

You can also use .map()

$(".drinks input").change(function() {
  var others = $('.drinks input:checked').map(function(i) {
    return {
      'id': $(this).val(),
      quantity: 1
    }
  }).get();
  console.log(others);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drinks">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
  <input type="checkbox" value="3">
</div>

edited Mar 27, 2017 at 9:43

answered Mar 27, 2017 at 9:42

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Rajesh Dixit Over a year ago

I'd suggest others[i] = others[i] || {}

Curtis · Accepted Answer · 2017-03-27 09:43:14Z

The others array only has one object and therefore it will fail when you have multiple checked inputs.

Rather than initialising with one object, you can add an object to the array with each iteration.

  var others = [];
  $('.drinks input:checked').each(function (i) {
       others.push({
          id: $(this).val(),
          quantity: 1
       });
  });
  console.log(others);

Full solution:

$( ".drinks input" ).change(function() {
   var others = [];
  $('.drinks input:checked').each(function (i) {
       others.push({
          id: $(this).val(),
          quantity: 1
       });
  });
  console.log(others);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drinks">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>

Mamun · Accepted Answer · 2017-03-27 09:51:34Z

1

Try the following:

$( ".drinks input" ).change(function() {
  var others = [];
  $('.drinks input:checked').each(function (i) {
       others[i] = others[i] || {}
       others[i].id = $(this).val();
       others[i].quantity = 1;
  });
  console.log(others);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drinks">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
  <input type="checkbox" value="3">
</div>

edited Mar 27, 2017 at 9:51

answered Mar 27, 2017 at 9:45

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Gohel Dhaval · Accepted Answer · 2017-03-27 10:07:33Z

0

minimum Line of code and working file.

    $( ".drinks input" ).change(function() {
        var others = [{}];
        $('.drinks input:checked').each(function (i) {
             others[i] = {'id': $(this).val(),'quantity' : '1'};
        });
        console.log(others);
    });

Demo:- https://jsfiddle.net/5dd4p74t/

answered Mar 27, 2017 at 10:07

Gohel Dhaval

8301 gold badge8 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript - undefined variable in each

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related