Skip to content
Advertisement

populating a dropdown from data in the database

I have the following.
HTML

<div class="frmInput">
 	<select id="registrationTypeDropDown" class="select">
   </select>
</div>

Javascript

fetch('../svc/RegistrationForm.asmx/GetRegistrationType', {
    method: 'GET',
    credentials: 'same-origin',
    headers: {
        'Content-Type': 'application/json'
    }
}).then((response) => {
    types = response.json();
    
    for (const [ID, Name] of Object.entries(types)) {
        console.log(ID, Name);
        options += '<option value="' + ID + '" text="' + Name + '" />';
    }
    $('#registrationTypeDropDown').append(options);
  });

I’ve tried different ways of getting my results and nothing is working. When I run it it doesn’t even hit my for loop. I’d appreciate it if someone can point out a better way of doing this or what I’m doing wrong.

enter image description here

Advertisement

Answer

You are actually assigning Promise to the types variable try this. Also see using fetch api

fetch('../svc/RegistrationForm.asmx/GetRegistrationType', {
  method: 'GET',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => response.json()). // you are missing this line
then((response) => {
  types = response;

  for (const [ID, Name] of Object.entries(types)) {
    console.log(ID, Name);
    options += '<option value="' + ID + '" text="' + Name + '" />';
  }
  $('#registrationTypeDropDown').append(options);
});
Advertisement