How Can I Populate Dropdown Select Element using getJSON

Question

I want to populate dropdown select menu. i need to get bankName and iINNo from this JSON

My 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:

 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

The array with bank data is under the property data inside the JSON. So the trick is to loop over that property - right now you loop over the entire JSON response, including the status and message properties.

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:

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

Answer 2

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>

Answer 3

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 . In addition the properties of each object will be in the second argument of the handler function, code in your example. For example 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. 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>