如何使用 getJSON 填充下拉 Select 元素

Question

我想填充下拉 select 菜单。 我需要从此 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}

我的 Java 脚本：

 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)); 
    })
});

Answer 1

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

您将获得个别银行 object 作为第二个参数item ，然后您可以访问它的属性并将 append 访问到您的下拉列表中：

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

Answer 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; }); } });

 <select id="banks"></select>

Answer 3

问题是因为你需要的数据在data object 的data属性中，所以你需要遍历data.data 。 此外，每个 object 的属性将在您的示例中的code处理程序 function 的第二个参数中。 例如code.bankName 。

然而值得注意的是，代码可以被整理，并且还可以通过使用map()构建单个option元素字符串来提高其性能，您只需 append 到 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>