Как получить и манипулировать данными JSON с помощью JQuery и отображения в формате HTML

Question

У меня есть данные JSON:

[{
  "in_id": "1", 
  "in_name": "Education Point",
  "in_email": "",
  "in_pin": "834006"
}, {
  "in_id": "2",
  "in_name": "Vidya Coaching Center",
  "in_email": "",
  "in_pin": "834006"
}]

Я хочу показать его внутри тега select. Я пытаюсь так:

$.ajax({
  type: 'post',
  url: "<?=base_url()?>affiliates/get_institute/" + pin_code,
  dataType: 'json',
  success: function(data) {
    var html = '';
    var i;
    for (i = 0; i < data.length; i++) {
      html += "<option value='" + data[i].in_name + "'>" + data[i].in_name + "</option>";
    }
    $('select[name="sel_inst"]').append(html);
  }
});

Answer 1

Вам нужно добавить <select name="sel_inst"></select> в ваш HTML.

Вы должны установить in_id для значения параметра вместо in_name

Я пытался воспроизвести, это сработало

var data = [{"in_id":"1","in_name":"Education Point","in_email":"","in_pin":"834006"},{"in_id":"2","in_name":"Vidya Coaching Center","in_email":"","in_pin":"834006"}];
var html = '';
                  var i;
                  for(i=0; i<data.length; i++){
                      html +="<option value='" +data[i].in_id+"'>"+data[i].in_name+"</option>";
                    }
                  $( 'select[name="sel_inst"]').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sel_inst"></select>

Answer 2

Как сказал Хиен Нгуен, вам нужно добавить тег выбора в ваш HTML.

и вы должны установить in_id для значения параметра вместо in_name

также используйте sel_inst в качестве идентификатора, я решил вместо этого использовать foreach, и это сработало

Надеюсь, это поможет

let data = [{
  "in_id": "1", 
  "in_name": "Education Point",
  "in_email": "",
  "in_pin": "834006"
}, {
  "in_id": "2",
  "in_name": "Vidya Coaching Center",
  "in_email": "",
  "in_pin": "834006"
}];

let selectBox = $('#sel_inst');
$.each(data,function(index,item){
$(selectBox).append('<option value="'+item.in_id+'" data-pin="'+item.in_pin+'">'+item.in_name+'</option>')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select name="sel_inst" id="sel_inst">

</select>