Getting type error while using Ajax call in JavaScript/jQuery

Question

I am getting the following error while extracting some value inside loop using jQuery. I am showing my error below.

Uncaught TypeError: Cannot read property 'no_of_optional' of undefined

I am providing my code below.

var data = $.param({
  'op': 'setPollField',
  'sid': id
});
$.ajax({
method: 'POST',
url: "dbcon/DBConnection.php",
data: data
}).done(function(msg) {
  var qdata = JSON.parse(msg);
  var get = $("#ques").val();
  var cntr = 0;
  for (var i = 1; i < get; i++) {
    if (i != 0) {
      $("#questions0").val(qdata[0].questions);
      $('#noofoption0').val(qdata[0].no_of_optional);
      var data = $.param({
        'op': 'getOptional',
        'id': qdata[0]['_id']['$id']
      });
      $.ajax({
        method: 'POST',
        url: "dbcon/DBConnection.php",
        data: data
      }).done(function(msg) {
          var optdata = JSON.parse(msg);
          var cnt = 0;
          for (var j = 0; j < qdata[0].no_of_optional; j++) {

          }
        }
        cnt++;
      }
    })
}
if (i == 1) {
  $('#questions' + i).val(qdata[i].questions);
  $('#noofoption' + i).val(qdata[i].no_of_optional);
  var data = $.param({
    'op': 'getOptional',
    'id': qdata[i]['_id']['$id']
  });
  $.ajax({
    method: 'POST',
    url: "dbcon/DBConnection.php",
    data: data
  }).done(function(msg) {
    var optdata = JSON.parse(msg);
    var cnt = 0;
    console.log('first question', qdata[i].no_of_optional);
    for (var j = 0; j < qdata[i].no_of_optional; j++) {

    }
  })
}
}
})

I am getting error at this console.log('first question',qdata[i].no_of_optional); .Actually qdata is containing the two set of data(qdata[0],qdata[1]) but inside the second ajax call i is becoming 2.

Here I am expecting qdata[1].no_of_optiona inside second ajax call.

BenG · Answer 1 · 2016-08-23T11:38:31.273

use a closure, by the time the done callback is called the for loop has finished and incremented i:-

var data = $.param({
  'op': 'setPollField',
  'sid': id
});
$.ajax({
  method: 'POST',
  url: "dbcon/DBConnection.php",
  data: data
}).done(function(msg) {
  var qdata = JSON.parse(msg);
  var get = $("#ques").val();
  var cntr = 0;
  for (var i = 1; i < get; i++) {
    if (i == 1) {

      (function(i) {

        $('#questions' + i).val(qdata[i].questions);
        $('#noofoption' + i).val(qdata[i].no_of_optional);
        var data = $.param({
          'op': 'getOptional',
          'id': qdata[i]['_id']['$id']
        });

        $.ajax({
          method: 'POST',
          url: "dbcon/DBConnection.php",
          data: data
        }).done(function(msg) {
          var optdata = JSON.parse(msg);
          var cnt = 0;
          console.log('first question', qdata[i].no_of_optional);
          for (var j = 0; j < qdata[i].no_of_optional; j++) {

          }
        })

      })(i);
    }
  }
})

i gave the question part where i was getting problem but actually i have also one condition like this `if (i != 1) {...}` which is not working if i am updating your code. I am updating my post again with full code. — satya, Aug 23 '16 at 11:42
check my updated post again here by doing like u my other if condition is not working. — satya, Aug 23 '16 at 11:48

Getting type error while using Ajax call in JavaScript/jQuery

1 Answers1