如何使用jquery获取和操作json数据并在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

正如Hien Nguyen所说，您需要在超文本标记语言中添加选择标记。

您应该为选项的值设置in_id，而不是in_name

也使用sel_inst作为id，我决定使用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>')
});

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


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

</select>

Answer 2

您需要添加

您应该为选项的值设置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>