javascript - Fill listbox with data loaded from PHP via AJAX

My goal is to show a modal div loaded when a button that contains the user id is pressed with two listboxes, one with avaible usergroups and another with the groups the user currently is into.

At this moment the data is being successfully.

Developer tools log:

[{id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"},??�]
0: {id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"}
1: {id: 1, name: "Admin", idgrupo: 2, nome: "Cliente"}
Copy code

But the data isn't beeing displayed on the modal div without any error code.

Here's the code:

##Controller:

public function getGroups($id)
{

  $data = \DB::table('grupoutilizador')
  -> join ('users', function ($join) use ($id){
    $join->on('users.id', '=', 'grupoutilizador.iduser')
    ->where('users.id', "=", $id );
  }) -> join ('grupo', 'grupo.idgrupo', "=", 'grupoutilizador.idgrupo') ->
  select('users.id', 'users.name', 'grupo.idgrupo', 'grupo.nome')
  -> get();



  return response()->json($data, 200);
}
Copy code

##JavaScript:

function saveGroup(type,id){
  $('#useridgr').attr('placeholder', '').val('');
  $("#usernamegr").attr('placeholder', 'Nome').val('');
  $('#list_box').html('');
  $('#list_box_ini').html('');
  
  if (type == 1){
    
    
  } else {
    loadatagroup(id);
  }
  
}
var loadatagroup = (uid) => {
  
  $.ajax({
    type: 'GET',
    url: 'usergrupo/' + uid,
    data: {'_token': $("input[name='_token']").val()},
    success: function(data){
      
      $('#useridgr').attr('placeholder',data.id).val(data.id);
      $("#usernamegr").attr('placeholder',data.name).val(data.name);
       
      <?php
      
      $gruposini = mysqli_query($conn2,'SELECT *, 0 AS INUSE FROM grupo');
      
      while($row = mysqli_fetch_array($gruposini)) {
        
        $stringoption =  "$(\"#list_box_ini\").append(\"<option value='".$row['idgrupo']."'>".$row['nome']."</option>\");";
        
      }
      
      ?>
      
      for (i=0; i<data.lenght; i++){
        
        var id = response[i]['idgrupo'];
        var name = response[i]['nome'];
        
        $("#list_box").append("<option value='"+id+"'>"+name+"</option>");
      }
      
      
      
    }
    
  })
  
}
Copy code

##HTML:

  <div class="card-body">
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons"></i></div>
        </div>
        <input name = 'id' type="text" class="form-control" placeholder="" id='useridgr' disabled hidden>
      </div>
    </div>
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons">face</i></div>
        </div>
        <input name = 'name' type="text" class="form-control" placeholder="" id='usernamegr' disabled>
      </div>
    </div>
    
    <select  id = "list_box_ini" name="list_box_ini"  multiple="multiple"> </select>
    
    
    <select  id = "list_box" name="list_box"  multiple="multiple"> </select>
    
  </form>
</div>
Copy code

How I could make the data appear?

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.