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 : 105
Taille : 2,7 Ko

Nom : 2020-11-10 14_45_11-Window.png
Affichages : 105
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 : 99
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 : 102
Taille : 3,0 Ko

Nom : 2020-11-10 14_46_32-Window.png
Affichages : 102
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.

**zorino** · 10/11/2020, 18h29

ok je vais tester ça demain, merci encore !

**javatwister** · 11/11/2020, 08h55

Et pour faire plus économique et modulable:

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
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<style>
    table, td, th {
      border: 1px solid black;
    }
    table {
     border-collapse: collapse;
    }
</style>
</head>
 
<body>
 
<table id="t">
	<thead>
		<tr>
			<th>Rubrique 1</th>
			<th>Rubrique 2</th>
			<th>Rubrique 3</th>
		</tr>
	</thead>
</table>
 
<script>
 
const 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" }
        ]
};
 
const corps=document.querySelector("#t").appendChild(document.createElement("tbody"));
 
tab.ligne.forEach(v=>{
        let tr=corps.appendChild(document.createElement("tr"));
        let td=document.createElement("td");
        Object.values(v).forEach(v2=>{
                let cl=td.cloneNode();
                cl.textContent=v2;
                tr.appendChild(cl);
        });
})
 
</script>
 
</body>
</html>

**zorino** · 11/11/2020, 10h20

Envoyé par javatwister

Et pour faire plus économique et modulable:

OK, je ne comprends pas tout mais je vois le principe.
Si le clonage me permet de dupliquer tout le contenu des balises (attributs, evènements...), ça pourrait me convenir parfaitement.
Merci pour ton aide !

**javatwister** · 11/11/2020, 10h27

Il faudra peut-être que tu nous montres un peu plus les options que tu veux (et sans doute aussi le contenu réel du JSON);

**zorino** · 11/11/2020, 15h50

pour l'instant, seulement des évènements et du CSS, de ce genre-là :

Code :

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

          <tr class="tablecalendrier" id="j1m4"  onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this,3)"><td class="text-right" id="j1m4e1"> </td><td class="text-nowrap" id="j1m4sc"> </td><td class="text-left" id="j1m4e2"> </td><td></td><td class="text-left small" id="j1m4bl"> </td></tr>

Mais je vais tester ce cloneNode, j'aurai vite la réponse

**zorino** · 11/11/2020, 17h31

ça fonctionne parfaitement, tous les attributs et évènements sont clonés.
Merci !

Une dernière question : dans ton exemple, tu utilises document.querySelector("#t") là où moi j'aurais mis document.getElementById("t").
C'est mieux ? C'est pareil ? C'est juste pour m'épater ?

**javatwister** · 11/11/2020, 17h35

http://javatwist.imingo.net/affichtab.htm

Alors, deux précisions:

- Ne te prends pas la tête sur cloneNode(): je l'ai utilisé pour des raisons d'économie car l'interpréteur s'en sort mieux qu'avec createElement() dans le cas d'un grand nombre de créations.

- La ligne témoin que tu donnes n'est pas très belle, en effet...

Regarde cet exemple.

- J'ai juste ajouté à l'exemple précédent une classe css permettant de sélectionner le 1er, le 2e ou le 3e élément d'une fratrie et une autre qui change la hauteur des cases sur "mouseover". ce ne sont que des exemples idiots mais tu comprendras le principe:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
td:nth-of-type(1) {
  color:red;
}
td:nth-of-type(2) {
  color:green;
}
td:nth-of-type(3) {
  color:blue;
}
 
tbody td:hover{height:50px}

- Dans la partie script, j'ai ajouté un gestionnaire "click" qui lance une alerte:

Code javascript :

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

1
2
3
4
5
document.querySelectorAll("#t tbody tr").forEach((v,i)=>{
	v.addEventListener("click",()=>{
		alert("ligne " + (i+1))
	})
})

Bref, évite de polluer le html avec des appels javascript ou des classes à rallonge;

**zorino** · 11/11/2020, 19h40

Jute pour le fun, le test que j'avais fait :

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
<style>
    table, td, th {
      border: 1px solid black;
    }
    table {
     border-collapse: collapse;
    }
    .rouge { background-color: red; }
    .vert { background-color: green; }
    .bleu { background-color: blue; }
</style>
</head>
 
<body>
 
<table id="t">
	<thead>
		<tr>
			<th>Rubrique 1</th>
			<th>Rubrique 2</th>
			<th>Rubrique 3</th>
		</tr>
		<tr id="ligne1">
		 <td class="rouge" onclick="alert(this.className)">rouge</td>
		 <td class="vert" onclick="alert(this.className)">vert</td>
		 <td class="bleu" onclick="alert(this.className)">bleu</td>
		</tr>
	</thead>
</table>

Tu es un pro et moi un amateur et c'est pour ça que mon code te fait hurler alors que moi je trouve ça très lisible parce qu'on le comprend tout de suite, sans réfléchir

Ceci dit, je comprends ton point de vue et te remercie pour les exemples, j'ai appris plein de trucs en partant d'eux !

**javatwister** · 11/11/2020, 20h16

Non non, je suis exactement comme toi, sauf que j'ai commencé un peu avant. A force, quand on veut mettre à jour une vieille page, on se rend compte de l'intérêt d'un code qui distingue html, css et JS 😉

Afficher et formater des données dynamiquement

JavaScript

Discussions similaires

Partager

Partager