Récupérer la bonne valeur dans ma variable d'une réponse retour AJAX

Résolu/Fermé
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021 - 15 avril 2020 à 19:48
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021 - 15 avril 2020 à 20:53
Bonjour,

Je suis débutant en programmation et je travaille sur mon premier projet et je coince sur mon premier AJAX.

Je récupère donc mon résultat qui viens du PHP:

echo json_encode(array('result'=>$resultat,'sql'=>$sql,'datas'=>$datas));

qui contient :

JSON
Charge utile de la réponse

{"result":[{"id":"100001"},{"id":"100012"},{"id":"100034"},{"id":"100035"},{"id":"100044"},{"id":"100046"},{"id":"100065"}],"sql":"SELECT id FROM cutting_tools_01 WHERE FAMILLE_OUTIL = :FAMILLE_OUTIL AND SOUS_FAMILLE = :SOUS_FAMILLE ","datas":{":FAMILLE_OUTIL":"FRAISE",":SOUS_FAMILLE":"TORIQUE"}}

J'ai besoin d'utiliser les valeurs (100001, 100012, 100034, etc...)

J'ai tourné mon code dans tous les sens que j'ai pu imaginer, mais j'ai pas trouvé le bon.
Ce qui sors est une variable [objet Objet] le plus souvent. Ci dessous une capture ecran de la console

et mon JS:

//---------*************----------************-------------
//                  BOUTON RECHERCHER                    //
//---------*************----------************-------------

function fRecherche(){

  console.log("On entre dans la fonction fRecherche");
    let page = document.body ;
    let formRecherche = document.getElementById('idFormRechercher') ;
    let formRechercheDiv = document.getElementById('idDIVFrechercher') ;

    formRecherche.style.display = 'block' ;

    // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET.
    creation.removeEventListener('click',fCreation) ;
    recherche.removeEventListener('click',fRecherche) ;
    modification.removeEventListener('click',fModification) ;
    raz.removeEventListener('click',fReset) ;

} // SORTIE DE LA FONCTION fRecherche

//BOUTON FERMER RECHERCHE
let boutonFermerRecherche = document.getElementById('idboutonFermerRecherche');
boutonFermerRecherche.addEventListener('click',fermerRecherche ) ;

//  FONCTION DU BOUTON FERMER DU FORMULAIRE RECHERCHE
// Revalider les quatres boutons de l'entete - voir à utiliser attribut onclick de form
function fermerRecherche (){
  console.log("On entre dans la fonction FermerRecherche");
    let formRecherche2 = document.getElementById('idFormRechercher') ;
    creation.addEventListener('click',fCreation) ;
    recherche.addEventListener('click',fRecherche) ;
    modification.addEventListener('click',fModification) ;
    raz.addEventListener('click',fReset) ;

    formRecherche2.style.display = 'none';
}

//BOUTON VALIDER RECHERCHE
    // reference www.w3schools.com -> JAVA SCRIPT / JSON PHP
//alert ("Famille outil avant recuperation = " + (document.getElementById('idSlctCFamilleR').value)) ;
//alert ("Matiere avant recuperation = " + (document.getElementById('idSlctCMatiereR').value)) ;
//alert ("Diametre 1 avant recuperation = " + (document.getElementById('idInputDia1R').value))  ;  
 
let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche');
boutonValiderRecherche.addEventListener('click',validerRecherche);
//boutonValiderRecherche.onclick = "validerRecherche()" ;
 
// FONCTIONS AJAX	
function validerRecherche(){
  console.log("Récupération des variables");
 
  // RECUPERATION DES VARIABLES DU FORMULAIRE RECHERCHE

var idSlctidR =  "";
var idSlctRef_MagR = ""; 
var idSlctFamilleR = document.getElementById('idSlctFamilleR').value;
var idSlctS_FamilleR = document.getElementById('idSlctS_FamilleR').value;
var idSlctMatiereR = document.getElementById('idSlctMatiereR').value;
var idInputNbreZR = "";
var idInputDia1R = document.getElementById('idInputDia1R').value;
var idInputLong1R = document.getElementById('idInputLong1R').value;
var idInputDia2R = document.getElementById('idInputDia2R').value;
var idInputDia3R = document.getElementById('idInputDia3R').value;
var idInputLongUtileR = document.getElementById('idInputLongUtileR').value;
var idInputLongTotaleR = document.getElementById('idInputLongTotaleR').value;
var idInputCaract1R = document.getElementById('idInputCaract1R').value;
var idInputCaract2R = "";
var idInputFournisseurR = document.getElementById('idInputFournisseurR').value;
var idInputRef_FournisseurR = document.getElementById('idInputRef_FournisseurR').value;
var idInputPrixR = document.getElementById('idInputPrixR').value;
var idInputQteMiniR = document.getElementById('idInputQteMiniR').value;
var idInputCasEmploi1R = document.getElementById('idInputCasEmploi1R').value;
var idInputCasEmploi2R = document.getElementById('idInputCasEmploi2R').value; 
var idInputCasEmploi3R = "";
var idInputCasEmploi4R = ""; 
var idInputCasEmploi5R = "";
var idInputCasEmploi6R = "";

var filtre = { id: idSlctidR,
               RefMag: idSlctRef_MagR,
               familleOutil: idSlctFamilleR ,
               SousFamille: idSlctS_FamilleR,
               Matiere: idSlctMatiereR,
               Dia1: idInputDia1R,
               Dia2: idInputDia2R,
               LongUtile: idInputLongUtileR,
               Caract1: idInputCaract1R,
               Fournisseur: idInputFournisseurR,
               Ref_Fournisseur: idInputRef_FournisseurR,
               CasEmploi1R: idInputCasEmploi1R,
               CasEmploi2R: idInputCasEmploi2R              
               };

function creerFiltreSend(obj) {
  var resultat = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i) && obj[i]!=""  ) {
        resultat += i + "=" + obj[i] + "&";
    }
  }
  return resultat;
}
               
var filtreSend = creerFiltreSend(filtre);
filtreSend = filtreSend.slice(0, filtreSend.length-1);
//alert(filtreSend); 

  console.log("On entre dans la fonction validerRecherche");
  var xmlhttp ="", resultRecherche = "",x="", idRow ="" ;    
  xmlhttp = new XMLHttpRequest();   
  xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
	  console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){	
        var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
        if(result!=null){
			for (x in result){
                           console.log('x = ',x);
			   idRow = document.getElementById(x);                
			   idRow.style.display = 'none';
                        }          
	}         
    }else{
		  console.log('no result !');
		}
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    }	
 };
 xmlhttp.open("POST", "trouver.php", true);
 xmlhttp.onerror = function () { 
    console.log(xmlhttp, xmlhttp.status); 
	alert("Erreur ajax : Regarder la console pour plus de détails !");
 }; 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(filtreSend);

}  
	

//ECOUTE DU CLICK SUR BOUTON RECHERCHE
let recherche = document.getElementById('chercher') ;
recherche.addEventListener('click',fRecherche) ;





Configuration: Windows / Firefox 75.0


Merci d'avance pour votre aide.
A voir également:

3 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
Modifié le 15 avril 2020 à 20:22
Re Bonjour,

Peux tu tester ceci ?
 xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
      // console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){ 
         var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
         if(result!=null){
           console.log('RESULT :',result); // pour savoir ce que contient la variable result.
           console.log('RESULT -> Json :',JSON.parse(result));
           /*
           for (x in result){
             console.log('x = ',x);
              idRow = document.getElementById(x);                
              idRow.style.display = 'none';
           } 
          */
        }         
      }else{
        console.log('no result !');
      }
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    } 
 };




1
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021
15 avril 2020 à 20:32
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
15 avril 2020 à 20:38
Donc, result contient bien la liste (en objet)

et ça ?
 xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
      // console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){ 
         var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
         if(result!=null){
           console.log('RESULT :',result); // pour savoir ce que contient la variable result.

   
           for (x in result){
             console.log('id = ',x, result[x].id);
             // idRow = document.getElementById(x);                
             // idRow.style.display = 'none';
           } 
        
        }         
      }else{
        console.log('no result !');
      }
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    } 
 };
0
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021
15 avril 2020 à 20:42
0
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021
15 avril 2020 à 20:53
Super Merci Jordan, ça marche maintenat.
J'ai écrit, et ça enlève les lignes sélectionnées:

  for (x in result){
             console.log('id = ',x, result[x].id);
             var y = result[x].id;
             idRow = document.getElementById(y);                
             idRow.style.display = 'none';
           } 


Un grand merci!!!
Il me reste plus qu' à retourner dans le PHP pour voir comment j'inverse la selection.

JC
0