Boucler avec Jquery $.each() sur un tableau d’objets Json

Introduction:

J’en avait marre de faire des boucles For en JS, alors je commence à utiliser $.each().

C’est pour boucler sur un tableau d’objets JSON . (Rappel : Un tableau [] contient des objets {} Json)

Exemple

La méthode JS suivante récupère son tableau d’objets Json de  listingCoursTotal.php, puis, dans sa fonction de rappel(callback) affiche chaque photo :


function listingCours(){
    $.ajax({
        type: "POST",
        url: "listingCoursTotal.php",
        dataType: "json",
        success: function (data) {
            $( "#vlc" ).dialog( "open" );//Ouvre la fenêtre
            $.each(data, function(i, item) {//Jquery $.each est l'équivalent d'une boucle foreach
                // Dans la ligne suivante, je demande d'afficher l'image de chaque objets{} du tableau d'objets json data, c'est une  boucle, et dans cette boucle, je peut récupérer toutes les données.
                $("#vlc_content").append('<img src="images/'+data[i].photo+'" title="'+data[i].photo+'" class="photographie">');
                });
        }
    });
};

On voit passer le tableau d’objets Json dans Firebug, il peut être énorme, mais c’est très rapide et performant:

each1

Le fichier listingCoursTotal.php qui génère ce fichier Json est celui-ci :

<?php
  
include('connexionSql.php');
connexionSql();
  
$lectureSql="select cours.idcours,cours.idsalle,cours.idliste,cours.datedebut,cours.datefin,cours.photo,cours.nom,cours.heure,salle.nom,professeur.nom,cours.jour,cours.idfrequence,cours.nbetudiantmax,cours.nbetudiantmin,cours.remarque,cours.adresse,cours.idcategcours,cours.idprofesseur,cours.idbatiment,cours.idorganisation,cours.idniveaurequis,cours.notedecours from cours left join salle on cours.idsalle=salle.idsalle left join professeur on cours.idprofesseur=professeur.idprofesseur ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
 
while ($col=mysql_fetch_array($lecture)){
    $tabCours[]=array(
        "idcours"        =>$col[0],
        "idsalle"        =>$col[1],
        "idliste"        =>$col[2],
        "datedebut"      =>$col[3],
        "datefin"        =>$col[4],
        "photo"          =>$col[5],
        "nom"            =>$col[6],
        "heure"          =>$col[7],
        "salle"          =>$col[8],
        "professeur"     =>$col[9],
        "jour"           =>$col[10],
        "idfrequence"    =>$col[11],
        "nbetudiantmax"  =>$col[12],
        "nbetudiantmin"  =>$col[13],
        "remarque"       =>$col[14],
        "adresse"        =>$col[15],
        "idcategcours"   =>$col[16],
        "idprofesseur"   =>$col[17],
        "idbatiment"     =>$col[18],
        "idorganisation" =>$col[19],
        "idniveaurequis" =>$col[20],
        "notedecours"    =>$col[21]
        );
};

print_r(json_encode($tabCours)); // Affiche le tab au format Json pour que Jquery le récupère
exit();	 

Et voici le résultat dans Supercours, sans rechargement de page :

each2

Conclusion

Bien sur, dans la boucle, on ne charge pas que des photos, on peut charger des tas d’autres variables, et les insérer dans un $.load en html.

Encore une fois, à comparer avec Angular.js ng-repeat la semaine prochaine.

Publicités