Faire une boucle dans une table en javascript

22 juillet 2017 à 13:31:44

Bonjour,

Tout d'abord merci a OpenClassrooms pour ces cours, tutos, forum. Je début en HTML / PHP et je m'inspire beaucoup de ce site pour résoudre mes problèmes. Je suis un débutant passionné qui a quelque notion en html php / MySQL mais qui n'a aucune notion en javascript. Cependant cela va bientôt faire 2 semaines que je cherche mais je n'arrive pas a trouver / comprendre comment je dois faire.

Voici mon soucis :

Je souhaiterai mettre des variables issu d'une base de données dans un script JS.

Ou j'en suis (mes tests) :

J'ai une base MYSQL et j'arrive a faire une requête et l'afficher dans un script PHP (Ouha incroyable). J'ai lu qu'il fallait que je passe par Json et Ajax pour communiquer avec JavaScript. Chose que j'arrive également a faire. Ma page HTML charge bien mon fichier PHP par le biais d'un JavaScript.

test.php

<?php
header('Content-Type: application/json');

// on se connecte à MySQL 
include 'connect.php';
$sth = $pdo->prepare("SELECT * FROM table_test");
$sth->execute();

$data = $sth->fetchAll(PDO::FETCH_ASSOC);


echo json_encode($data);

?>

Ma page test.html

       <body>
        <!-- Ce UL Sera rempli avec les données du tableau PHP -->
        <div></div>
        <script type='text/javascript'>
        $(document).ready(function(){
                /* Appelle le php qui contient le tableau php encodée en json */
                $.getJSON('test.php', function(data) {
                        /* [XMLmind] contiendra le tableau php en tant qu’objet javascript */
                        $.each(data, function(key, val) {

var hi = '' + val.label + '';
var name = '' + val.value + '';
result = hi + name;
alert(result); 
                        });
                });


        });
        </script>

</body>

Jusque l'a tout fonctionne.

Maintenant mon but est de mettre a jour un fichier JS de la même manière que mon script dans la page test html.

Mon fichier html.

                <div class="card-body collapse in">
                    <div class="card-block">
                        <div id="donut-chart" class="height-400">

//affiche le contenu généré par javascript avec l'id "donut-chart"
			</div>
  
                        
                    </div>

Mon Js :

$(window).on("load", function(){

    Morris.Donut({
        element: 'donut-chart',
        data: [{
 
             label: "Nicolas",
            value: 95 
        }, {
            label: "Snoop",
            value: 80
        }, {
            label: "Francis",
            value: 25
        },{
            label: "Nono",
            value: 25
        },{
            label: "JIm",
            value: 25
        }, {
            label: "Suggggar",
            value: 10
        }, ],
        resize: true,
        colors: ['#00A5A8', '#FF7D4D', '#FF4558','#626E82','#62AA82','#628792']
             
    });

Le but est de remplacer le DATA { label, value } par une boucle issue du script test.php. Et la ça fait deux semaines que je bloque la dessus.

Pouvez-vous m'aider / m'orienter ?

Est-ce que je fais complètement fausse route ?

Merci beaucoup.

Elisabeth24

22 juillet 2017 à 15:59:10

 $.getJSON('test.php', function(data) {
        Morris.Donut({
             element: 'donut-chart',
             data: data,
             resize: true,
             colors: tab_colors
     
 });

il faudrait juste générer les couleurs suivant le nombre d'éléments dans data.

En fait il faudrait savoir ce qu'il y a exactement dans le tableau data renvoyé via ajax.

C'est juste une suggestion.

Aussi dans le json_encode forcer les valeurs numériques à être encodées comme des nombres:

echo json_encode( data, JSON_NUMERIC_CHECK);

-
Edité par Elisabeth24 22 juillet 2017 à 16:03:30

Développeuse Web.

Dutdut

23 juillet 2017 à 1:52:09

Merci pour votre réponse.

Dans la table MySQL il y a juste un champ label contenant un nom et un champ value contenant l'age.

Pour être plus précis voici ce que j'aimerai faire :

$(window).on("load", function(){

    Morris.Donut({
        element: 'donut-chart',
        data: [{
        
         $.getJSON('test.php', function(data) {
             $.each(data, function(key, val) {
var name = '' + val.label + '';
var age = '' + val.value + '';
 
             label: name,
            value: age 
        },{
        
                });
                });
 ],
        resize: true,
        colors: ['#00A5A8', '#FF7D4D', '#FF4558','#626E82','#62AA82','#628792']
        

        
        
        
    });

 });

label et value tourne en boucle pour récupérer tout le contenu de la table sql.

Elisabeth24

23 juillet 2017 à 10:33:11

Ben alors dans data, il y a déjà ce qu'il faut:

Il suffit de le passer à Morris comme je l'ai écrit au-dessus, non? Pourquoi boucler dessus?

Développeuse Web.

Dutdut

24 juillet 2017 à 0:58:30

Merci Elisabeth24.

En faite dans ma table SQL il peut y avoir 2 résultats comme 5 ou 6 voir 10.

Le code JavaScript Morris a déjà les "label" et "value" de pré rempli (dans l'exemple de mon premier post il y en a 6). Moi ce que je souhaite c'est qu'en fonction de ma requête SQL, les "label" et "value" du JavaScript se mettent à jour automatiquement.

C'est peut-être ce que vous essayer de m'expliquer mais dans ce cas je n'ai pas tout compris (désolé).

Elisabeth24

24 juillet 2017 à 9:50:17

Je ne connais pas Morris en fait. Mais, je ne comprends pas l'intérêt de boucler sur le résultat data, si il a déjà le bon format: un tableau d'objet {label: xxx, value:yyy}. A voir les options à ajouter au json_encode ( json_encode( data, JSON_NUMERIC_CHECK & JSON_FORCE_ARRAY))

$(window).on("load", function(){
 
   $.getJSON('test.php', function(data) {
        Morris.Donut({
        element: 'donut-chart',
        data: data,
        resize: true,
        colors: ['#00A5A8', '#FF7D4D', '#FF4558','#626E82','#62AA82','#628792']
    });
});

Et pourquoi créer le "Donut ", au chargement de la page, et pas quand tu as les résultats de ta requête ajax.

$(window).on("load", function(){
 
   var donut = Morris.Donut({
        element: 'donut-chart',
        data: [],
        resize: true,
        colors: ['#00A5A8', '#FF7D4D', '#FF4558','#626E82','#62AA82','#628792']
              
    });

    //Et puis 
    $.getJSON('test.php', function(data){
        donut.setData( data );
    });

});

Développeuse Web.

Dutdut

25 juillet 2017 à 18:23:33

Bonjour,

Merci pour votre réponse. J'avoue que c'est encore un peu confus dans ma tête. Je vais faire des tests pour essayer de comprendre et je reviendrais afficher mes résultats.

Il me faudrait des cours pour au moins avoir la base en JS...

Merci