[英]How Can I Populate Dropdown Select Element using getJSON
I want to populate dropdown select menu.我想填充下拉 select 菜单。 i need to get bankName and iINNo from this JSON
我需要从此 JSON 获取 bankName 和 iINNo
My JSON:我的 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}
My Javacript:我的 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));
})
});
The array with bank data is under the property data
inside the JSON.带有银行数据的数组位于 JSON 内的属性
data
下。 So the trick is to loop over that property - right now you loop over the entire JSON response, including the status and message properties.所以诀窍是遍历该属性 - 现在您遍历整个 JSON 响应,包括状态和消息属性。
You will get the individual bank object as the second argument item
and then you can access it's properties and append it to your dropdown:您将获得个别银行 object 作为第二个参数
item
,然后您可以访问它的属性并将 append 访问到您的下拉列表中:
$.each(data.data, function (index, item) {
console.info('Bank Data: ', item);
dropdown.append($('<option></option>').text(item.bankName));
});
This should work这应该有效
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>
The issue is because the data you need is in the data
property of the data
object, so you need to loop over data.data
.问题是因为你需要的数据在
data
object 的data
属性中,所以你需要遍历data.data
。 In addition the properties of each object will be in the second argument of the handler function, code
in your example.此外,每个 object 的属性将在您的示例中的
code
处理程序 function 的第二个参数中。 For example code.bankName
.例如
code.bankName
。
However it's worth noting that the code can be tidied, and also have its performance improved by using map()
to build a single string of option
elements which you append to the DOM only once.然而值得注意的是,代码可以被整理,并且还可以通过使用
map()
构建单个option
元素字符串来提高其性能,您只需 append 到 DOM 一次。 Try this:尝试这个:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.