如何使用 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>