Could not return from if statement using Javascript/Jquery

Question

I am facing one issue. The return statement is not working as expected using Javascript/Jquery. I am explaining my code below.

$.each(resultArr,function(i,data){
            console.log('dt',data);
            var rule = $("#sub"+i).val();
            if (rule == '') {
                var subject=data.sub_name;
                toastr.error('Attendance for '+ subject +' can not be blank');
                return false;
            }else if (parseInt(rule) > 100) {
                var subject=data.sub_name;
                toastr.error('Attendance for '+ subject +' can not be more than 100');
                return false;
            }else{
                data.attendance=rule;
                if (data.id == '') {
                    flag=0;
                }else{
                    flag=1;
                }
            }
        })

Here I need if else if is true it should return after displaying the error message. but in my case its showing the error message and also the else part is executing and value is assigning to flag variable. Here I need once error message will display it should return from there.

The function that returns is the one you define on the first row, inside the `.each`. Do you want the **whole** `each` loop to stop and return? — GalAbra, Jul 25 '18 at 11:22
Then [this](https://stackoverflow.com/a/8224424/3103891) is the answer you're looking for. — GalAbra, Jul 25 '18 at 11:26
As per this link I have used `return false` to stop the loop but same issue. — , Jul 25 '18 at 11:29
It seems your else part is executing in one iteration and then if part in another iteration. — Vikram Singh, Jul 25 '18 at 11:32
Lets for 1st iteration `if statement` went false the `else if is executing` if its true,its showing the error message ans next else part is also executing. — , Jul 25 '18 at 11:36
@subhra I have added a below snippet of running code. Please try to run that and check where your expectations are not getting matched? — Charu Maheshwari, Jul 25 '18 at 11:50

GalAbra · Answer 1 · 2018-07-25T11:47:21.897

It seems to work: note how the line console.log('The input is fine') runs only once.

The only thing I wasn't able to reconstruct was toastr.error, so I guess the problem lies somewhere there.

let resultArr = [{
  sub_name: 1
}, {
  sub_name: 2
}];

let ans = null;

$.each(resultArr, function(i, data) {
  console.log('dt', data);
  var rule = $("#sub" + i).val();
  if (rule == '') {
    var subject = data.sub_name;
    ans = ('Attendance for ' + subject + ' can not be blank');
    return false;
  } else if (parseInt(rule) > 100) {
    var subject = data.sub_name;
    ans = ('Attendance for ' + subject + ' can not be more than 100');
    return false;
  } else {
    console.log('The input is fine');
    data.attendance = rule;
    if (data.id == '') {
      flag = 0;
    } else {
      flag = 1;
    }
  }
});

console.log(ans);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="sub0" value="1"></div> - This element's value is valid<br>
<input id="sub1" value="101"></div> - This element's value is invalid

score 0 · Answer 2 · answered Jul 25 '18 at 11:48

Your code is working very much fine. Adding this as an answer so that you can see answer using Run Code Snippet.

var resultArr = [{
    'sub_name': 'a',
    'id': 1,
    'attendance': ''
  },
  {
    'sub_name': 'b',
    'id': 2,
    'attendance': ''
  },
  {
    'sub_name': 'c',
    'id': 3,
    'attendance': ''
  }
];

function test() {
  $.each(resultArr, function(i, data) {
    console.log('dt', data);
    var rule = $("#sub" + i).val();
    if (rule == '') {
      var subject = data.sub_name;
      //toastr.error('Attendance for ' + subject + ' can not be blank');
      return false;
    } else if (parseInt(rule) > 100) {
      var subject = data.sub_name;
      //toastr.error('Attendance for ' + subject + ' can not be more than 100');
      return false;
    } else {
      data.attendance = rule;
      if (data.id == '') {
        flag = 0;
      } else {
        flag = 1;
      }
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="btn btn-primary" onClick="test();"> Call me </a>
<input id="sub0" name="sub0" value="" />
<input id="sub1" name="sub1" value="100" />
<input id="sub2" name="sub2" value="2" />
<input id="sub3" name="sub3" value="4" />

Could not return from if statement using Javascript/Jquery

2 Answers2