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.

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