Solution 1 :

i don’t know if you want to ask on how to fetch the data or how to use AJAX to fetch the data because you just provide the html only and not with the js.
If you ask on how to use AJAX to fetch the data from URL, here’s some example :

function getCategories(){
  const xhr = new XMLHttpRequest();
  xhr.open('GET','https://stuaas.herokuapp.com/api/v1/organizations/categories',true);
  xhr.send();

  xhr.onload = function(){
    if(this.status === 200){
      const response = JSON.parse(this.responseText);
      
      let output = '';
      if (response.success) {
        response.payload.data.forEach(function(cat){
          output += `<option value = "${cat.id}">${cat.name}</option>`
        });
        document.querySelector('.categories-opt').innerHTML = output;
      } else {
        console.log('something went wrong!');
      }
    }
  }
}
(getCategories)();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form class="form-signin" method="GET" action="https://stuaas.herokuapp.com/api/v1/organizations/categories"> 
    <div class="form-label-group">
       <select name="" class="form-control">
         <option value="">Select your Account Type</option>
         <option>Student</option>
         <option>Organisation</option>
       </select>
   </div>
 
   <div class="form-label-group">
     <input type="name" id="inputName" class="form-control" placeholder="Organisational Name" required>
     <label for="inputName">Organisation Name</label>
   </div>
 
   <div class="form-label-group">
     <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
     <label for="inputEmail">Email address</label>
   </div>
 
   <div class="form-label-group">
     <input type="tel" id="inputPhone" class="form-control" placeholder="Phone Number" required autofocus>
     <label for="inputPhone">Phone Number</label>
   </div>
 
   <div class="form-label-group">
     <input type="text" id="inputAddress" class="form-control" placeholder="Address" required autofocus>
     <label for="inputAddress">Address</label>
   </div>
 
   <div class="form-label-group">
     <input type="text" id="inputDescription" class="form-control" placeholder="Description" required autofocus>
     <label for="inputDescription">Description</label>
   </div>
 
   <div class="form-label-group">
     <select name="categories" class="categories-opt form-control">
   </div>
 
 
 <div class="form-label-group">
   <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
   <label for="inputPassword">Password</label>
 </div>
 
 <div class="form-label-group">
   <input type="password" id="inputPassword" class="form-control" placeholder="Retype Password" required>
   <label for="inputPassword">Retype Password</label>
 </div>
 
 <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign Up</button>
 <hr class="my-4">
 <button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign Up with Google</button>
 </form>     
<script src="app.js"></script> 
</body>
</html>

Problem :

Well, here is a signup form, and in an input area i want the categories to be fetched automatically from the server api……. everything is ready but i can’t seems to fetch it
api: https://stuaas.herokuapp.com/api/v1/organizations/categories

code:

<form class="form-signin" method="GET" action="https://stuaas.herokuapp.com/api/v1/organizations/categories"> 
   <div class="form-label-group">
      <select name="" class="form-control">
        <option value="">Select your Account Type</option>
        <option>Student</option>
        <option>Organisation</option>
      </select>
  </div>

  <div class="form-label-group">
    <input type="name" id="inputName" class="form-control" placeholder="Organisational Name" required>
    <label for="inputName">Organisation Name</label>
  </div>

  <div class="form-label-group">
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputEmail">Email address</label>
  </div>

  <div class="form-label-group">
    <input type="tel" id="inputPhone" class="form-control" placeholder="Phone Number" required autofocus>
    <label for="inputPhone">Phone Number</label>
  </div>

  <div class="form-label-group">
    <input type="text" id="inputAddress" class="form-control" placeholder="Address" required autofocus>
    <label for="inputAddress">Address</label>
  </div>

  <div class="form-label-group">
    <input type="text" id="inputDescription" class="form-control" placeholder="Description" required autofocus>
    <label for="inputDescription">Description</label>
  </div>

  <div class="form-label-group">
    <select name="" class="form-control">
        <option value="">Categories</option>

  </div>


<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control" placeholder="Retype Password" required>
  <label for="inputPassword">Retype Password</label>
</div>

<button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign Up</button>
<hr class="my-4">
<button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign Up with Google</button>
</form> 
    <div class="form-label-group">
        <select name="" class="form-control">
            <option value="">Select your Account Type</option>
            <option>Student</option>
            <option>Organisation</option>
          </select>
    </div>

    <div class="form-label-group">
        <input type="name" id="inputName" class="form-control" placeholder="Organisational Name" required>
        <label for="inputName">Organisation Name</label>
      </div>

      <div class="form-label-group">
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputEmail">Email address</label>
      </div>

      <div class="form-label-group">
        <input type="tel" id="inputPhone" class="form-control" placeholder="Phone Number" required autofocus>
        <label for="inputPhone">Phone Number</label>
      </div>

      <div class="form-label-group">
        <input type="text" id="inputAddress" class="form-control" placeholder="Address" required autofocus>
        <label for="inputAddress">Address</label>
      </div>

      <div class="form-label-group">
        <input type="text" id="inputDescription" class="form-control" placeholder="Description" required autofocus>
        <label for="inputDescription">Description</label>
      </div>

      <div class="form-label-group">
        <select name="" class="form-control">
            <option value="">Categories</option>

      </div>


    <div class="form-label-group">
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <label for="inputPassword">Password</label>
    </div>

    <div class="form-label-group">
      <input type="password" id="inputPassword" class="form-control" placeholder="Retype Password" required>
      <label for="inputPassword">Retype Password</label>
    </div>

    <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign Up</button>
    <hr class="my-4">
    <button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign Up with Google</button>
</form>


By