Discussion :

[prilix]

Bonjour à tous,
Alors voilà ma question. En fait, je cherche à transformer un tableau de note codé en HTML dans un objet JavaScript afin qu'il soit plus facile à manipuler, et plus précisément à remettre en page.

Voici le tableau :
HTML:

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
<table class="table table-bordered bulletin">
<thead>
	<tr>
		<th>UE</th>
		<th>Module</th>
		<th>Matière</th>
		<th>Evaluation</th>
		<th class="coef">Coefficient</th>
		<th class="resultat">Moyenne ou Note</th>
		<th class="resultat">Moyenne<br/>Promo</th>
		<th class="rang">Rang</th>
	</tr>
</thead>
<tbody>
 
	<tr class="ue">
		<td colspan="4">UE 41 : Compléments en informatique</td>
		<td class="coef">10</td>
		<td class="resultat">13</td>
		<td class="resultat">13,34</td>
		<td class="rang">19</td>
	</tr>	<tr class="matiere">
		<td colspan="2"></td>
		<td colspan="2">M4101C-IPI : Administration système et réseau</td>
		<td class="coef">1,50</td>
		<td class="resultat">13</td>
		<td class="resultat">13,34</td>
		<td class="rang">19</td>
	</tr>	<tr class="evaluation">
		<td colspan="3"></td>
		<td>19/02/2015 : contrôle </td>
		<td class="coef">1</td>
		<td class="resultat">13</td>
		<td class="resultat">13,34</td>
		<td class="rang">19</td>
	</tr>		
	<tr class="general">
		<td colspan="4">Moyenne générale</td>
		<td>&nbsp;</td>
		<td class="resultat">13</td>
		<td class="resultat">10,37</td>
		<td class="rang">28</td>
	</tr></tbody>
</table>

Ce que je voudrais faire en fait, c'est par exemple faire un objet qui aurait une tête du genre objet[ue][matiere][evaluation]. Le but à terme, serait de transformer cet objet en JSON pour pouvoir le parser facilement. Je précise bien que je ne peux utiliser que JavaScript, car je me sers de Cordova pour développer une application Android.


Je vous remercie bien chaleureusement par avance

[fabone]

Salut,

Les solutions qui me viennent :

1. Solution statique : générer le code javascript
- analyser syntaxiquement le code et le traduire en Javascript (il te faut un parser du style yacc qui génère du C),
- inclure ton code à ce que tu veux.

2. Solution dynamique : créer l'objet javascript pendant l'exécution.
- analyser syntaxiquement le code html et créer l'objet au fur et à mesure en javascript (il faut pouvoir donner l'accès à Javascript au fichier (ou à la base de données) qui contient le code html).

Bon courage.

[fabone]

Si ton but est simplement de coder en Javascript le code html que tu as présenté ce n'est pas bien compliqué faut apprendre Javascript. Ce ne sera pas très long car il est simple.

Dans mon précédent message je te donnais une solution pour n'importe quel code html.

[SylvainPV]

Comment est généré ce tableau HTML ? Pour une application Cordova ça m'aurait paru plus logique que le serveur envoie directement les données en JSON, récupérées côté client via un appel AJAX. Ensuite générer le tableau en HTML à partir de l'objet JavaScript est un jeu d'enfant.

[prilix]

Ç'aurait été l'idéal en effet... Mais le fait est que notre projet est de réaliser une application pour le site de notre IUT. Mais le fait est également que nous n'avons strictement aucun accès à quoi que ce soit du site, surtout pas au serveur. Et je n'ai aucune idée de comment le tableau est généré... De plus, on passe par une iframe. Ça complique un petit peu plus les choses encore...

[headmax]

Salut une petite esquisse pour le reste je te laisse faire, pas sure que ça te convient .

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
 
var json = [];
 
$('table tbody tr').each(function(){
 
  switch($(this).attr('class')){
    case 'ue' : 
      json['ue'] = ($(this));
      break;
    case 'matiere' :
      json['ue']['matiere'] = $(this);
      break;
    case 'evaluation' : 
      json['ue']['matiere']['evaluation'] = $(this);
      break;
  }
 
});
 
console.log(json) // pour l'object
console.log(JSON.stringify(json.eu)) //pour ton object stringifier json ;)

[prilix]

C'est exactement ce que je cherchais ! Merci beaucoup. Le seul hic si je puis me permettre... Je maîtrise plutôt bien JS, jQuery un petit peu moins. Donc ma nouvelle question, c'est comment faire pour faire la même chose sachant que mon tableau se trouve dans une iframe?
Merci encore en tout cas

[headmax]

Salut, voici un petit exemple non testé a adapté selon tes besoins...

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
24
 
var json = [];
var obj = document.getElementsByTagName('tr');
 
for(i in obj){
 
  if((typeof(obj[i]) === "object") && (obj[i].getAttribute('class') !== null)){
 
    switch(obj[i].getAttribute('class')){
      case 'ue' : 
        json['ue'] = obj[i];
        break;
      case 'matiere' :
        json['ue']['matiere'] = obj[i];
 
        break;
      case 'evaluation' : 
        json['ue']['matiere']['evaluation'] = obj[i];
        break;
    }
  }
}
console.log(JSON.stringify(obj))
console.log(json)

EDIT:
Pour l'iframe il faut que tu soit sur le même domaine a moins d'un CORS ou passé par une API Rest pour ce qui concerne le cross domain.
Si tu maitrise JS dans ce cas pense seulement au PARENT exprimé par TOP qui est au dessus de toutes les autres c'est elle la Chef d'orchestre frameset en général.

Partons sur l'exemple que ta frame principale frameset contient 2 frames : Frame1 et Frame2.
Frame1

Code :

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

1
2
3
 
top.Frame2.ma_function_action(); //ici on appel ma_function_action() qui est dans Frame2
parent.document.ma_function_action1(); // ""       ""             ""             ""          "" Frameset (principale)

Frame2

Code :

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

1
2
3
 
top.Frame1.ma_function_action3(); //ici on appel ma_function_action3() qui est dans Frame1
parent.document.ma_function_action1(); // ""       ""             ""             ""          "" Frameset (principale)

grosso modo...
gl

[prilix]

Merci beaucoup
En fait si je puis me permettre, ce code va servir à générer une appli Android, via Cordova qui autorise le cross-domain sans restriction... (https://cordova.apache.org/docs/en/4..._index.md.html.
Pour résumer, si tu veux j'accède à mon iframe comme ça :

Code :

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

1
2
3
var x = document.getElementById("pageCo"); //Récupération de l'iframe créée dans le head
    var y = (x.contentWindow || x.contentDocument); //Récupération du contenu de l'iframe
    y = y.document;

Du coup je ne suis pas sûr que le principe soit le même...

Merci de votre aide en tout cas

[headmax]

Je connais pas du tout cordova mais pour ce qui est de ton exemple il s'agit de la technique dont je parle au dessus dite CORS il s'agit de paramètrer le header du server apache afin qu'il accepte des requêtes POST GET ... provenant d'autre domains autorisés.

Pour ce qui est de ton exemple, tu peux aussi accéder au document de cette manière sans problème et appeler une function dont tu as adapté et mit tout ce qu'on a fait au dessus et que tu l'appel si tu as mit ta function selon ton exemple dans la var y.

Code :

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

1
2
3
4
5
6
 
var x = document.getElementById("pageCo"); //Récupération de l'iframe créée dans le head
    var y = (x.contentWindow || x.contentDocument); //Récupération du contenu de l'iframe
    y = y.document;
 
y.myfunction(); //si la function que tu as créer ce trouve dans la frame y