populating a dropdown from data in the database

Tags:



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

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);
});


Source: stackoverflow