Why am I getting Undefned Jquery-ajax

Question

I have the following code. I have tried to get the values to populate into a <select> box, but keep getting undefined .

I have toggled Object.keys with Object.values , but keep getting the same result. Please can someone point me in the right direction.

$(document).ready(function() {
  $("#ddlcomp").change(function() {
    var cid = $("#ddlcomp").val();

    $.ajax({
      url: 'doload.php',
      method: 'post',
      data: 'catid=' + cid
    }).done(function(rows) {
      //console.log(rows);
      rows = JSON.parse(rows);
      console.log(rows);
      $('#ddlsubcat').empty();
      Object.keys(rows).forEach(function(rowss) {
        console.log(rowss);
        $('#ddlsubcat').append('<option>' + rowss.subcat + '</option>');
        //$('#ddlsubcat').innerHTML = $('#ddlsubcat').innerHTML +
        //    '<option>' + rowss.subcat + '</option>';
      })

      //for (var i = 0, len = rows.length;  i < len; i++){
      //  $('#ddlsubcat').append('<option>' + rows[i].subcat + '</option>');
      //}
    })
  })
})

Answer 1

I have resolved it. The problem wasn't with the Jquery Ajax part, but with the PHP code I used to extract the data from database.

if(isset($_POST['catid'])){
  $catid = $_POST['catid'];
  $query = mysqli_query($con, "select * from tbsubcat where catid = '$catid' order by subcat ");
  if (mysqli_num_rows($query) > 0){
   // while($rows=mysqli_fetch_row($query)){
        $rows=mysqli_fetch_all($query,MYSQLI_ASSOC);
        echo json_encode($rows);
   // }
  }
}

The commented out block of code was the original >>> mysqli_fetch_row , so I changed it to mysqli_fetch_all .

This solved the problem.