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

Question

我想填充下拉选择菜单。我需要从这个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}

我的Javascript：

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响应上循环，包括状态和消息属性。

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

$.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对象的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>