如何使用 getJSON 填充下拉选择元素答案

【问题标题】：How Can I Populate Dropdown Select Element using getJSON如何使用 getJSON 填充下拉选择元素
【发布时间】：2020-04-19 11:32:44
【问题描述】：

我想填充下拉选择菜单。我需要从此 JSON 中获取 bankName 和 iINNo

我的 JSON：

{"status":true,"message":"Request Completed","data":[{"id":1,"activeFlag":1,"bankName":"Union Bank of India","details":"Union Bank of India","iINNo":"607161","remarks":"","timestamp":"21/11/2016 16:00:00"},{"id":2,"activeFlag":1,"bankName":"Bank of India","details":"Bank of India","iINNo":"508505","remarks":"","timestamp":"21/11/2016 16:00:00"},],"statusCode":0}

我的 Javacript：

 let dropdown = $('#Bank');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Select Bank</option>');
dropdown.prop('selectedIndex', 0);

const url = 'http://cors-anywhere.herokuapp.com/';

// Populate dropdown with list of provinces
$.getJSON(url, function (data) {

  $.each(data, function (res, code) {
          console.info(res);
                  console.info(code);
    dropdown.append($('<option></option>').attr('value', value.iINNo).text(index.bankName)); 
    })
});

【问题讨论】：

这个问题和 PHP 有什么关系？
您还应该包括对您的问题的正确解释。运行代码时实际发生了什么？请阅读How to create a Minimal, Reproducible Example 和How do I ask a good question?。

标签： javascript php jquery json

【解决方案1】：

包含银行数据的数组位于 JSON 内的属性 data 下。所以诀窍是循环遍历该属性——现在您循环遍历整个 JSON 响应，包括状态和消息属性。

您将获得单个银行对象作为第二个参数item，然后您可以访问它的属性并将其附加到您的下拉列表中：

$.each(data.data, function (index, item) {
    console.info('Bank Data: ', item);
    dropdown.append($('<option></option>').text(item.bankName)); 
});

【讨论】：

【解决方案2】：

这应该可以工作

const banks = document.getElementById('banks');
banks.innerHTML = '<option selected="true" disabled>Select Bank</option>';

fetch('https://cors-anywhere.herokuapp.com/http://www.allindiaapi.com/HMESEVAAEPS/GetBankDetails?tokenkey=KzhnBIUi1wuM97yizKJ07WB3YwPSykyX9CjB6C6O5LRyClZ9YZl9NcIk5f6Fjna4')
.then(response => response.json())
.then(response => {
	if(response.status){
  	response.data.forEach(bank => {
    	const option = document.createElement('option');
      option.value = bank.iINNo;
      option.innerContent = bank.bankName;
    });
  }
});

&lt;select id="banks"&gt;&lt;/select&gt;

【讨论】：

【解决方案3】：

问题是因为你需要的数据在data对象的data属性中，所以你需要循环data.data。此外，每个对象的属性将在处理函数的第二个参数中，在您的示例中为 code。例如code.bankName。

但是值得注意的是，代码可以被整理，并且还可以通过使用map() 构建一个由option 元素组成的字符串来提高其性能，您只需将这些元素附加到DOM 一次。试试这个：

let $dropdown = $('#Bank');
$dropdown.html('<option value="" disabled>Select Bank</option>').val('');

// AJAX commented for example only:
//$.getJSON(url, function(data) {
  let data = {
    "status": true,
    "message": "Request Completed",
    "data": [{
      "id": 1,
      "activeFlag": 1,
      "bankName": "Union Bank of India",
      "details": "Union Bank of India",
      "iINNo": "607161",
      "remarks": "",
      "timestamp": "21/11/2016 16:00:00"
    }, {
      "id": 2,
      "activeFlag": 1,
      "bankName": "Bank of India",
      "details": "Bank of India",
      "iINNo": "508505",
      "remarks": "",
      "timestamp": "21/11/2016 16:00:00"
    }, ],
    "statusCode": 0
  }

  let html = data.data.map(bank => `<option value="${bank.iINNo}">${bank.bankName}</option>`);
  $dropdown.append(html);
//});

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

【讨论】：