Comment remplir une liste déroulante à partir d'une réponse ajax

Question

Je suis novice en ajax. Je souhaite remplir une liste déroulante à partir d'une réponse ajax. La réponse est un json de médecins obtenu et je voudrais remplir une liste déroulante avec cette liste afin que l'administrateur puisse sélectionner un médecin particulier pour un patient.

Voici mon code ajax:

$("button").click(function(e) { 
    e.preventDefault(); 
    var id = $(this).val(); 

    $.ajax({ 

    type: "POST", 
     url: "map/"+id, 
     data: { 
      id: $(this).val(), 
      '_token': $('input[name=_token]').val() 
     }, 
     success: function(result) { 
      console.log(result); 
     }, 
     error: function(result) { 
      alert('error'); 
     } 
    }); 

Ps: je l'ai utilisé console.log donc je pouvais voir le résultat

et ma méthode de contrôleur Laravel:

public function getDoctorSuggests(Request $request){ 

     $id = $request->id; 
     // Get id from database, just skiping this step there 
     $patient = Patient::find($id); 

     if ($patient instanceof Patient){ 

      //get patient location details 
      $city = $patient->city; 

      //get doctors 
      $doctors = Doctor::where('city', $city)->get(); //narrow search to city 


      if (!$doctors->isEmpty()){ 
      $distance =[]; 

      foreach($doctors as $doctor){ 
      $location = $this->distance($patient->latitude, $patient->longitude, $doctor->latitude, $doctor->longitude, 'K'); 
      array_push($distance, $location); 
      } 

      return response()->json(['doctors' => $doctors]); 
      } 

     return response()->json(['doctors' => NULL]); 
     } 
    } 

S'il vous plaît Comment puis-je obtenir le résultat et remplir une liste déroulante html avec elle sans recharger la page?

la réponse JSON est (comme Gotten de ma console inspecteur de chrome)

Object {doctors: Array(2)}doctors: Array(2)0: Objectaddress: "29 Mambilla Street, Abuja, Nigeria"age: 2city: "Abuja"country: "Nigeria"created_at: "2017-06-14 01:01:06"currency: nulldoctor_cv: nulldoctor_mdcn: "wwjdnwe"email: "doctor@gerocare.org"firstname: "Doctor"id: 1lastname: "Doctor"latitude: 9.0805515longitude: 7.5098858midname: "Midname"phone: "9"place_id: "ChIJ2fEzeToKThARPnGlvU-PKh0"sex: 2state: "FCT"updated_at: "2017-06-14 01:08:52"zip_code: null__proto__: Object1: Objectaddress: "29 Mambilla Street, Abuja, Nigeria"age: 2city: "Abuja"country: "Nigeria"created_at: "2017-06-14 01:01:06"currency: nulldoctor_cv: nulldoctor_mdcn: "wwjdnwe"email: "doctor@gerocare.orgj"firstname: "Doctor"id: 3lastname: "Doctor"latitude: 9.0805515longitude: 7.5098858midname: "Midname"phone: "9"place_id: "ChIJ2fEzeToKThARPnGlvU-PKh0"sex: 2state: "FCT"updated_at: "2017-06-14 01:08:52"zip_code: null__proto__: Objectlength: 2__proto__: Array(0)__proto__: Object 

Answer 1

tout d'abord essayer de valider si vous modèle de médecin est de retour quelque chose, et puis retournez comme ceci:

return response()->json($doctors); 

La réponse de json vous formatera objet de sortie dans un tableau d'objets.

Maintenant, vous pouvez remplir votre combobox comme cet exemple ci-dessous.

$("button").click(function(e) { 
e.preventDefault(); 
var id = $(this).val(); 
var select = $('#YourSelectBoxID'); 
$.ajax({ 

type: "POST", 
    url: "map/"+id, 
    data: { 
     id: $(this).val(), 
     '_token': $('input[name=_token]').val() 
    }, 
    success: function(data) { 
     var htmlOptions = []; 
     if(data.length){ 
       for(item in data) { 
        html = '<option value="' + data[item].id + '">' + data[item].firstname + '</option>'; 
       htmlOptions[htmlOptions.length] = html; 
       } 

       // here you will empty the pre-existing data from you selectbox and will append the htmlOption created in the loop result 
       select.empty().append(htmlOptions.join('')); 
      } 
    }, 
    error: function(error) { 
     alert(error.responseJSON.message); 
    } 
}) 

});

Bonne chance!

Answer 2

Trouver l'élément de sélection que vous souhaitez remplir:

var el = $('select[name="doctors"]'); 

puis dans la fonction ajax succès, itérer les résultats et les ajouter en tant que html:

success: function(result) { 
    for (var doctor in result) { 
     var doctor = result[i]; 
     el.append('<option value="' + doctor.value + "'>' + doctor.name + '</option>'; 
    } 
}, 

quelque chose à cet effet au moins.

Answer 3

c'est simple exemple dépendent de ce qui est la réponse exacte, il sera le changement:

$("button").click(function(e) { 
    e.preventDefault(); 
    var id = $(this).val(); 
    $.ajax({ 
     type: "POST", 
     url: "map/"+id, 
     data: { 
      id: $(this).val(), 
      '_token': $('input[name=_token]').val() 
     }, 
     success: function(result) { 
      var toAppend='<option value="null">default</option>>' 
      for(var obj in result){ 
       toAppend+='<option value="'+obj.id+'">'+ obj.title +'</option>>' 
      } 

      $("#populated").append(toAppend) 
     } 
     }, 
     error: function(result) { 
      alert('error'); 
     } 
    }); 

et cette entrée html:

<select id="populated"></select>