使用 jquery 填充选择框时出现“未定义”错误

Question

I have this code to populate a selectbox with aa list of banks using jquery

 let bank_dropdown = $('#bank');

bank_dropdown.empty();


bank_dropdown.prop('selectedIndex', 0);

const bank_url = 'https://ravesandboxapi.flutterwave.com/v2/banks/NG?public_key=FLWPUBK-3f**************1d15e97-X';

// Populate bank_dropdown with list of banks
$.getJSON(bank_url, function (data) {
  $.each(data, function (key, entry) {
    bank_dropdown.append($('<option></option>').attr('value',  entry.data.Banks.Code).text(entry.data.Banks.Name));
  })
});

html

 <div class="form-group">
     <small><b><label class="float-left" for="inputCategory">Bank</label></b></small>
      <select name="bank" id="bank" class="form-control form-control-sm" required="true">

    </select>
  </div>

The returned response of the url above looks like this

{
  "status": "success",
  "message": "SUCCESS",
  "data": {
    "Banks": [
      {
        "Id": 132,
        "Code": "560",
        "Name": "Page MFBank"
      },
      {
        "Id": 133,
        "Code": "304",
        "Name": "Stanbic Mobile Money"
      }
...
    ],
  }
}

but for some reason i keep getting this error in console

Uncaught TypeError: Cannot read property 'Banks' of undefined

Answer 1

It looks like your data.data object is itself an object, not an array, and you are trying to iterate over it.

{
  "status": "success",
  "message": "SUCCESS",
  "data": {      <- This is an object, not an array
    "Banks": []  <- This is the array
  }
}

Try this (using data.data.Banks):

$.each(data.data.Banks, function (key, entry) {
    bank_dropdown.append($('<option></option>').attr('value',  entry.Code).text(entry.Name));
})

If it helps, you can rename your response object to "res" or "response" for clarity

$.getJSON(bank_url, function (res) {
    // now use res.data.Banks
    $.each(res.data.Banks, function (key, entry) {
        bank_dropdown.append($('<option></option>').attr('value',  entry.Code).text(entry.Name));
    })
});

Answer 2

You are iterating the wrong object. See the snippet here:

 const data = { "status": "success", "message": "SUCCESS", "data": { "Banks": [{ "Id": 132, "Code": "560", "Name": "Page MFBank" }, { "Id": 133, "Code": "304", "Name": "Stanbic Mobile Money" }], } }; const bank_dropdown = $("#bank_dropdown"); $.each(data.data.Banks, function(key, entry) { bank_dropdown.append( $('<option></option>').val(entry.Code).html(entry.Name) ); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="bank_dropdown"> </select>