Bonjour à toutes et à tous,

J'ai sûrement fait quelque chose d'inutile vu le nombre d'outils à notre disposition (que je n'utilise pas).
J'ai très certainement réinventé la roue (en moins bien).
Je parle sans doute d'un sujet déjà abordé (ici).
J'utilise peut-être des méthodes qui ne vous conviennent pas (et vous aurez raison).

Mais, le joli mois de mai, il m'arrive fréquemment de chercher bêtement et longuement plus d'information sur l'objet que je manipule.
Je me suis simplifié la vie (ou tout le contraire) afin d'afficher une sorte de carte d'identité d'un objet.

Pour mes tests, j'ai écris ce petit bout d'HTML:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
<div>
  <input type="text" id="id_test" name="name_test" value="value_test">
  <input type="button" id="id_button" value="Identity Card" onclick="identity_card(document.getElementById('id_test'),0,0,'id');">
</div>

Vous constatez déjà quelque chose qui m'ennuie; ce sont les paramètres de la fonction identity_card. Etant donné que ce code n'est utile qu'aux développeurs, je me contente de ça. Toutefois, si vous avez une idée plus ergonome, n'hésitez pas.
Cette fonction prend plusieurs paramètres qui vont préciser quels éléments on désire afficher sur la carte d'identité:

Code js : 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
 
function identity_card(objet, info, style, element);
 
//*****************************
// Identity Card of an Object *
// ========================== *
// OBJET to be looked at      *
// -------------------------- *
// INFO                       *
// 0: All the elements        *
// 1: No null and empty       *
// 2: Precise element         *
// 3: The objects             *
// 4: No null and no object   *
// -------------------------- *
// STYLE                      *
// 0: document.write          *
// 1: alert                   *
// -------------------------- *
// ELEMENT (precise)          *
//*****************************

Cette liste peut-être modifiée selon ses desiderata. Je désire afficher tous les éléments, les éléments non null ou qui ont une valeur vide, un élément précis selon son nom, les éléments de type object, ou bien les éléments qui ont une valeur.
Concrètement, je fais un switch où je crée manuellement la condition du if. Ouep... c'est un peu... moche et inbuvable. :$

Code js : 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 conditions = "";
 
//Construction of conditions
switch (info)
{
   case 0:  conditions = true;
            break;
   case 1:  conditions = 'objet[tab[k]] != null && objet[tab[k]] != ""';
            break;
   case 2:  conditions = 'tab[k] == "' + element + '"';
            break;
   case 3:  conditions = 'objet[tab[k]] == "[object]"';
            //conditions += ' || objet[tab[k]] == "[object Object]"';
            break;               
   case 4:  conditions = 'objet[tab[k]] != null && objet[tab[k]] != ""';
            conditions += ' && objet[tab[k]] != "[object]"';
            //conditions += ' || objet[tab[k]] != "[object Object]"'; //Attention, parentheses manquantes
            break;                              
   default: conditions = false;
            alert("Info Error");
            break;           
}

Encore une fois, si quelqu'un a une idée plus pratique et agréable, il est le bienvenu.
Ensuite, je commence par trier la liste des éléments qui incombent à un objet. Je passe par un Array car je n'ai pas vérifié si il y avait moyen de trier plus rapidement:

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
//Sort of the elements
var tab = new Array();
var j = 0;
for(var i in objet)
   tab[j++] = i;
tab.sort();

Une fois mon tableau trié, je peux, selon mes conditions, créer la liste à afficher. Je propose un document.write ou bien un alert mais ce ne sont que des propositions et la liste est non-exhaustive.

Code js : 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
 
//Writing of the selected elements
if(style == 0)
{
   str = "<u>Identity Card:</u><br><br>";
   for(var k = 0; k<tab.length; k++)
   {
      if(eval(conditions))
   	   str += "<span style='color:blue'><b>" + tab[k] + ": </b></span>" + objet[tab[k]] + "<br>";
   }
   document.write(str);
}
else if(style == 1)
{
   str = "!Identity Card!\n\n";
 
   for(var k = 0; k<tab.length; k++)
   {
      if(eval(conditions))
   	   str += tab[k] + ": " + objet[tab[k]] + "\n";
   }
   alert(str);     
}
else alert("Style Error");

Voila.
Si maintenant vous me dîtes que c'est naze, que vous ne voyez pas à quoi ça sert, que vous avez bien mieux, ou quoi ou qu'est-ce, alors j'afficherai le panneau "Je suis déjà dehors!". ^^

Je vous mets le script en entier pour si vous voulez tester.


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
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<div>
  <input type="text" id="id_test" name="name_test" value="value_test">
  <input type="button" id="id_button" value="Identity Card" onclick="identity_card(document.getElementById('id_test'),0,0,'id');">
</div>	
 
<script type="text/javascript">
//*****************************
// Identity Card of an Object *
// ========================== *
// OBJET to be looked at      *
// -------------------------- *
// INFO                       *
// 0: All the elements        *
// 1: No null and empty       *
// 2: Precise element         *
// 3: The objects             *
// 4: No null and no object   *
// -------------------------- *
// STYLE                      *
// 0: document.write          *
// 1: alert                   *
// -------------------------- *
// ELEMENT (precise)          *
//*****************************
 
function identity_card(objet, info, style, element)
{
   var str = "";
   var conditions = "";
 
   //Construction of conditions
   switch (info)
   {
      case 0:  conditions = true;
               break;
      case 1:  conditions = 'objet[tab[k]] != null && objet[tab[k]] != ""';
               break;
      case 2:  conditions = 'tab[k] == "' + element + '"';
               break;
      case 3:  conditions = 'objet[tab[k]] == "[object]"';
               //conditions += ' || objet[tab[k]] == "[object Object]"';
               break;               
      case 4:  conditions = 'objet[tab[k]] != null && objet[tab[k]] != ""';
               conditions += ' && objet[tab[k]] != "[object]"';
               //conditions += ' || objet[tab[k]] != "[object Object]"'; //Attention, parentheses manquantes
               break;                              
      default: conditions = false;
               alert("Info Error");
               break;           
   }  
 
   //Sort of the elements
   var tab = new Array();
   var j = 0;
   for(var i in objet)
      tab[j++] = i;
   tab.sort();
 
   //Writing of the selected elements
   if(style == 0)
   {
      str = "<u>Identity Card:</u><br><br>";
      for(var k = 0; k<tab.length; k++)
      {
         if(eval(conditions))
      	   str += "<span style='color:blue'><b>" + tab[k] + ": </b></span>" + objet[tab[k]] + "<br>";
      }
      document.write(str);
   }
   else if(style == 1)
   {
      str = "!Identity Card!\n\n";
 
      for(var k = 0; k<tab.length; k++)
      {
         if(eval(conditions))
      	   str += tab[k] + ": " + objet[tab[k]] + "\n";
      }
      alert(str);     
   }
   else alert("Style Error");
}
</script>