ajax response not proper binding in select option value jQuery

October 6, 2022

I’m trying to get value from ajax to HTML but it’s not correctly binding in the dropdown even I tried in the textbox it’s not showing. I tried to add some static value it’s also not showing.
Ajax response is properly getting in the console but when I am trying to bind in the HTML its not show proper.

HTML code:

<div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title1" id="defaultModalLabel"></h4>
         </div>
         <div class="modal-body">
            <form method="POST" action="" accept-charset="UTF-8" >
               <label>Room Type</label>
               <h1 class="modal-title1" ></h1>
               <!-- <input type="text" class="apple"> -->
               <select class="apple" tabindex="-98">
                  <option>-Select Room type-</option>
               </select>
               <div class="modal-footer">
                  <input class="btn  btn-lg bg-indigo waves-effect" type="submit" value="SAVE">
                  <button class="btn  btn-lg bg-black waves-effect" data-dismiss="modal" type="button">CLOSE</button>    
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

JQuery code:

$(document).off('click', '.hotel_add').on('click', '.hotel_add', function () {
var id = $(this).attr('id');
var pos = $(this).closest('.hotel-result').data('pos-id');
$.get("<?php echo base_url('hotel/hotelDataGet') ?>/" + id + '/' + pos, function (result) {
var data = JSON.parse(result)
$.each(data,function(index,value){
console.log(value);
$('#defaultModalLabel').html(value.hotel_name);
$('.apple').append('
<option value="'+value['roomtype']+'">'+value['roomtype']+'</option>
');
});
$("#largeModal").modal();
//debugger;  
});
});

AJAX response

[
  {
    "id": "1",
    "hotel_name": "Hotel Bharat",
    "room_type": "4,1,2",
    "cp_price": "98"
  },
  {
    "roomtype": "Deluxe Room"
  },
  {
    "roomtype": "Luxury Room"
  },
  {
    "roomtype": "Family room"
  }
]

>Solution :

hotel_name only exists on the first object of your response, and the roomtype does not exist in your fist object, so you can change to this:

$.each(data,function(index,value){
     //check to see if this object has the property "hotel_name"
     if(value.hasOwnProperty("hotel_name"){
         $('#defaultModalLabel').html(value.hotel_name);
     }
     //check to see if this object has the property "roomtype"
     if(value.hasOwnProperty("roomtype") {
         $('.apple').append(
             '<option value="' +
              value['roomtype'] + 
              '">' +
              value['roomtype'] +
              '</option>'
         );
      }
});