Как я могу заполнить выпадающий список Выберите элемент с помощью getJSON

Question

Я хочу заполнить выпадающее меню выбора. мне нужно получить bankName и iINNo из этого 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}

Мой 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

Это должно работать

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 2

Проблема в том, что необходимые данные находятся в свойстве data объекта data, поэтому вам необходимо l oop больше 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>

Answer 3

Массив с банковскими данными находится в свойстве data внутри JSON. Таким образом, хитрость заключается в том, чтобы l oop поверх этого свойства - прямо сейчас вы l oop для всего ответа JSON, включая свойства status и message.

Вы получите отдельный объект банка в качестве второго аргумента item, а затем сможете получить доступ к его свойствам и добавить его в раскрывающийся список:

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