Afficher et formater des données dynamiquement

**zorino** · 10/11/2020, 15h16

Bonjour,
J'ai un site classique en PHP + MySQL mais les données qu'il gère sont quasiment mortes (c'est un championnat, donc la donnée d'1 match ne change qu'une seule fois : quand on met à jour le score) et je voudrais donc le transformer en javascript avec lecture d'un fichier JSON que je génère seulement quand les données changent.
Mais je débute en javascript et je me pose des questions basiques sur la meilleure façon de faire.

Explication par l'exemple, voici ce que je veux faire :
Nom : 2020-11-10 14_45_11-Window.png
Affichages : 106
Taille : 2,7 Ko

Nom : 2020-11-10 14_45_11-Window.png
Affichages : 106
Taille : 2,7 Ko

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html><head>
  <style>
    table, td, th {
      border: 1px solid black;
    }
    table {
     border-collapse: collapse;
    }
  </style>
</head>
<body>
 <table>
  <tr><td>largeur 1</td><td>largeur 2</td><td>largeur 3</td></tr>
  <tr><td>largeur 1 mais en plus grand</td><td>largeur 2</td><td>largeur 3 plus grand</td></tr>
  <tr><td>largeur 1</td><td>largeur 2</td><td>largeur 3</td></tr>
 </table>
</body>

Mon premier essai d'ajout de JSON :
Nom : 2020-11-10 14_46_01-Window.png
Affichages : 100
Taille : 2,8 Ko

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html><head>
  <style>
    table, td, th {
      border: 1px solid black;
    }
    table {
     border-collapse: collapse;
    }
  </style>
<script>
var text = '{ "ligne" : [{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" },' +
                        '{ "col1":"largeur 1 mais en plus grand" , "col2":"largeur 2", "col3":"largeur 3 plus grand" },' +
                        '{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" }]}';
var tab = JSON.parse(text);
</script>
</head>
<body>
 
 
 <table>
  <tr><td><script>document.write(tab.ligne[0].col1);</script></td><td><script>document.write(tab.ligne[0].col2);</script></td><td><script>document.write(tab.ligne[0].col3);</script></td></tr>
  <tr><td><script>document.write(tab.ligne[1].col1);</script></td><td><script>document.write(tab.ligne[1].col2);</script></td><td><script>document.write(tab.ligne[1].col3);</script></td></tr>
  <tr><td><script>document.write(tab.ligne[2].col1);</script></td><td><script>document.write(tab.ligne[2].col2);</script></td><td><script>document.write(tab.ligne[2].col3);</script></td></tr>
 </table>
</body>

C'est pas mal car le résultat me convient, mais j'ai 2 soucis :

je ne sais pas comment gérer le nombre de lignes (selon les championnats, le JSON pourra comporter plus ou moins de lignes)
je ne sais pas comment gérer les ruptures (par exemple si je voulais tester le n° de journée pour faire je ne sais quoi...)

Donc j'ai fait un autre essai qui consiste, en gros :

à prévoir dans mon HTML un nombre maximal de lignes invisibles (ici j'en ai mis 6 alors que je n'ai que 3 lignes à afficher)
à boucler sur mon JSON pour alimenter les balises et les rendre visibles

Ce principe me permettrait, dans l'absolu, de gérer aussi mes ruptures... sauf que le résultat est plutôt catastrophique :
Nom : 2020-11-10 14_46_32-Window.png
Affichages : 103
Taille : 3,0 Ko

Nom : 2020-11-10 14_46_32-Window.png
Affichages : 103
Taille : 3,0 Ko

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html><head>
  <style>
    table, td, th {
      border: 1px solid black;
    }
    table {
     border-collapse: collapse;
    }
    .invisible {
     display: none;
    }
  </style>
</head>
<body>
 <table>
  <tr id="lig1" class="invisible"><td id="lig1col1"></td><td id="lig1col2"></td><td id="lig1col3"></td></tr>
  <tr id="lig2" class="invisible"><td id="lig2col1"></td><td id="lig2col2"></td><td id="lig2col3"></td></tr>
  <tr id="lig3" class="invisible"><td id="lig3col1"></td><td id="lig3col2"></td><td id="lig3col3"></td></tr>
  <tr id="lig4" class="invisible"><td id="lig4col1"></td><td id="lig4col2"></td><td id="lig4col3"></td></tr>
  <tr id="lig5" class="invisible"><td id="lig5col1"></td><td id="lig5col2"></td><td id="lig5col3"></td></tr>
  <tr id="lig6" class="invisible"><td id="lig6col1"></td><td id="lig6col2"></td><td id="lig6col3"></td></tr>
 </table>
<script>
var text = '{ "ligne" : [{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" },' +
                        '{ "col1":"largeur 1 mais en plus grand" , "col2":"largeur 2", "col3":"largeur 3 plus grand" },' +
                        '{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" }]}';
var tab = JSON.parse(text);
var nblig = tab.ligne.length;
var i;
var obj;
for (i = 1; i <= 6; i++) {
 if (i <= nblig ) {
  id='lig' + i.toString() + 'col1'; obj = document.getElementById(id); obj.innerHTML=tab.ligne[i-1].col1;  
  id='lig' + i.toString() + 'col2'; obj = document.getElementById(id); obj.innerHTML=tab.ligne[i-1].col2;  
  id='lig' + i.toString() + 'col3'; obj = document.getElementById(id); obj.innerHTML=tab.ligne[i-1].col3;  
  id='lig' + i.toString();          obj = document.getElementById(id); obj.style.display = "block";
 }
}
</script>
</body>

Apparemment, le navigateur n'est plus en mesure d'ajuster la taille des colonnes et le CSS semble aussi en vrac, la bordure a l'air doublée...

Bref, je ne vais pas plus loin dans mes tests car j'ai besoin d'avis compétents sur la meilleure façon de faire :

un truc léger avec javascript+JSON
mais avec un JSON dont je ne connais pas la taille
et qui permette de jouer sur le CSS selon le contenu

Merci d'avance pour vos avis et vos retours d'expériences !

**Toufik83** · 10/11/2020, 16h39

Bonjour,

Je me demande pourquoi créer la variable JSON en tant que String alors que tu pouvais directement le faire en json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var tab = {
  "ligne": [{
      "col1": "largeur 1",
      "col2": "largeur 2",
      "col3": "largeur 3"
    },
    {
      "col1": "largeur 1 mais en plus grand",
      "col2": "largeur 2",
      "col3": "largeur 3 plus grand"
    },
    {
      "col1": "largeur 1",
      "col2": "largeur 2",
      "col3": "largeur 3"
    }
  ]
};
 
tab.ligne.forEach(function(elem,index) {//parcourir l'objet json tab.ligne
  console.log("col1 :",elem.col1,", col2 :",elem.col2,", col3 :",elem.col3,", index :", index);//voir le contenu de chaque item dans la console.
});

Comme il est possible aussi de créer le contenu du tableau html dynamiquement (dans la boucle forEach) en fonction de l'objet json.

**zorino** · 10/11/2020, 16h58

Envoyé par Toufik83

Je me demande pourquoi créer la variable JSON en tant que String alors que tu pouvais directement le faire en json :

Merci pour l'info, je ne savais pas... Mais bon, peu importe, dans le vrai site le json est dans un fichier à part...

Comme il est possible aussi de créer le contenu du tableau html dynamiquement (dans la boucle forEach) en fonction de l'objet json.

Tu veux dire créer le contenu en début de page, comme dans mon exemple 2 ? Mais comment ?
Je ne vois pas...

**Toufik83** · 10/11/2020, 17h13

Bonjour,

Un exemple très basique (n'oublis pas d'ajouter un id="table" au tableau):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
tab.ligne.forEach(function(elem, index) {
  let td1 = document.createElement("td"),
    td2 = document.createElement("td"),
    td3 = document.createElement("td"),
    tr = document.createElement("tr");
 
  //remplire les td
  td1.innerHTML = elem.col1;
  td2.innerHTML = elem.col2;
  td3.innerHTML = elem.col3;
 
  //ajouter les td dans le tr
  tr.append(td1);
  tr.append(td2);
  tr.append(td3);
 
  //ajouter le tr dans le tbody
  document.getElementById("table").append(tr)
 
});

**zorino** · 10/11/2020, 17h58

ok, je vois le principe ! Merci beaucoup pour l'exemple, il n'y a rien de tel quand on débute.

Et c'est une bonne façon de faire, ou alors c'est déconseillé (trop lent, trop gourmand en ressources, trop je ne sais quoi...) ?
Parce que ça peut représenter plusieurs dizaines de lignes. Et j'envisage que ça soit utilisé sur téléphones.

**Toufik83** · 10/11/2020, 18h05

Si c'est seulement une dizaines/centaines de lignes ce n'est pas grave.

Par-contre si le nombre de ligne est trop élevé (des milles ou millions..), là tu dois passer par un système afin de ne récupérer que (10,20...) lignes à la fois par exemple.

Afficher et formater des données dynamiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager