[POO] Fonction récursive pour affichage contenu d'un objet en notation JSON

Invité · 15/07/2008, 17h56

Bonjour,

J'aimerais afficher le contenu d'un objet dans une fenêtre popup.
Cela fonctionne si cet objet est un Array pur et aussi si il est écrit en JSON.
Cependant, quand j'écris mon objet en JSON avec du tableau dedans, il y a un décalage dans l'affichage. Et là je tourne en rond.

Il y a 4 objets (myObject0 à my Object3) et ceux sont les deux derniers qui me pose problème.

Voci le code :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
<script language="JavaScript">
//<!--
var textObject = "";
var indent = "";
var deep = 0;
 
// affichage des éléemnts d'un objet;
function listObject(object, nbindent, maxdeep) {
    var decal = '-----';
    var textObject = "";
 
    for (var i in object) {
        // nom de la propriété
        textObject += nbindent + "<b>" + i + "</b> : ";
        if (typeof(object[i]) == "object" && deep < maxdeep) {
            deep++;
            decal += nbindent;
            textObject += "<br />" + listObject(object[i], decal, maxdeep);
        }
        else {
            // valeur de la propriété
            deep = 0;
            textObject += object[i] + "<br />";
        }
    }
    return (textObject);
}
 
function retourObj (object, indent, deep) {
    w=open("",'popup','width=400,height=400,toolbar=no,scrollbars=yes,resizable=yes');
    w.document.write("<HTML><HEAD>");
    w.document.write("<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">")
    w.document.write("<TITLE></TITLE></HEAD>");
    w.document.write("<BODY><FONT face='arial' size=1>");
    w.document.write("<h3>Propri&eacute;t&eacute;s de \"" + object + "\"</h3>");
    var evalObject = eval(object);
    w.document.write ( (object) ? listObject(evalObject, indent, deep) : "Ce n'est pas un object");
    w.document.write("</FONT></BODY></HTML>");
    w.document.close();
}
 
var myObject3 =
{"markers": [
     {"lat":43.65654, "lng":-79.90138, "html":"Some stuff to display in the First Info Window","label":"Marker One"},
     {"lat":43.91892, "lng":-78.89231, "html":"Some stuff to display in the Second Info Window","label":"Marker Two"},
     {"lat":43.82589, "lng":-79.10040, "html":"Some stuff to display in the Third Info Window","label":"Marker Three"}
   ],
   "lines": [
       {"colour":"#FF0000", "width":2, "points":[ {"lat":43.65654 ,"lng":-79.90138 },
                                                  {"lat":43.91892 ,"lng":-78.89231 },
                                                  {"lat":43.82589 ,"lng":-79.10040 }
                                                ]
       },
       {"colour":"#008800", "width":4, "points":[ {"lat":43.9078 ,"lng":-79.0264 },
                                                  {"lat":44.1037 ,"lng":-79.6294 },
                                                  {"lat":43.5908 ,"lng":-79.2567 },
                                                  {"lat":44.2248 ,"lng":-79.2567 },
                                                  {"lat":43.7119 ,"lng":-79.6294 },
                                                  {"lat":43.9078 ,"lng":-79.0264 }
                                                ]
       }
   ]
}
 
var myObject2 =
{ "Itineraire" :
    { "nom" : "iti-1",
      "Etapes" : [
          { "nom" : "etape-1",
            "coordonnees": [
                  {"lat" : "120.1234", "lng" : "3.12345", "typepoly" : "0"},
                  {"lat" : "121.1234", "lng" : "3.12345", "typepoly" : "0"},
                  {"lat" : "122.1234", "lng" : "3.12345", "typepoly" : "0"},
                  {"lat" : "123.1234", "lng" : "3.12345", "typepoly" : "1"},
                  {"lat" : "124.1234", "lng" : "3.12345", "typepoly" : "0"}
            ]
          },
          { "nom" : "etape-2",
            "coordonnees": [
                  {"lat" : "130.1234", "lng" : "3.12345", "typepoly" : "1"},
                  {"lat" : "131.1234", "lng" : "3.12345", "typepoly" : "1"},
                  {"lat" : "132.1234", "lng" : "3.12345", "typepoly" : "1"},
                  {"lat" : "133.1234", "lng" : "3.12345", "typepoly" : "1"},
                  {"lat" : "134.1234", "lng" : "3.12345", "typepoly" : "0"}
            ]
          }
      ]
    }
};
 
 
var myObject1 = {
    "P" : {
          "P-1" : "p-1",
          "P-2" : "p-2"
    },
    "Q" : "q-1",
    "R" : {
          "R1" : {
                 "R2" : "r-2",
                 "R3" : "r-3"
          }
 
    }
}
 
var myObject0 =
["a",
  ["b", "c",
            ["d0", "d1", "d2", "d3"
            ],
  ],
  "e", "f",
            ["g0", "g1", "g2"
            ],
];
 
 
// -->
</script>
</script>
</head>
  <body>
    <form>
      Entrez un objet du modèle :
      <input type="text" id="valObject" name="" value="myObject0"><br>
      Profondeur de visuatisation :
      <input type="text" id="deepObject" name="" value="5"><br>
      <input type="button" value="Voir les propriétés" onClick="retourObj(document.getElementById('valObject').value, indent, document.getElementById('deepObject').value)">
    </form>
  </body>
</html>

Merci pour vos réponses.

Jean-Luc

Invité · 15/07/2008, 23h59

Bon!
Je vois que cela n'attire pas les foules.
Aussi, après moultes recherches, j'ai résolu l'affichage.

Voici le code (inclu 6 variables de test, avec un plus pour myObject5 ):

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
 
<script language="JavaScript">
//<!--
var deep = 0;
 
// affichage des éléments d'un object
function listObject(object, maxdeep) {
    var decal = '-- ';
    var textObject = "";
    for (var i in object) {
        // création de l'indentation
        var indent = "";
        for (var y = 0; y < deep; y++) indent += decal;
        // nom de la propriété
        textObject += "deep = " + deep + " : " + indent + "<b>" + i + "</b> : ";
        if (typeof(object[i]) == ("object") && deep < maxdeep) {
            deep++;
            textObject += "<br />" + listObject(object[i],  maxdeep);
            deep--;
        }
        else {
            // valeur de la propriété
            textObject += object[i] + "<br />";
        }
    }
    return (textObject);
}
 
// Affichage dans le div des éléments d'un object
function retourObj (object, deep) {
    var evalObject = eval(object);
    document.getElementById('infoObject').style.display = "";
    document.getElementById('infoObject').innerHTML = (object) ? listObject(evalObject, deep) : "Ce n'est pas un object";
}
 
var myObject5 = {"myFunction" : function() {alert('Vive JSON')}, "myProperty" : "pas sur"};
 
var myObject4 = [[[["tb4", "tb4-1", "tb4-2"], "tb3"], "tb2", "tb2-1"], "tb1", "tb1-1", "tb1-2", "tb1-3"];
 
var myObject3 =
{"markers": [
     {"lat":43.65654, "lng":-79.90138, "html":"Some stuff to display in the First Info Window","label":"Marker One"},
     {"lat":43.91892, "lng":-78.89231, "html":"Some stuff to display in the Second Info Window","label":"Marker Two"},
     {"lat":43.82589, "lng":-79.10040, "html":"Some stuff to display in the Third Info Window","label":"Marker Three"}
   ],
   "lines": [
       {"colour":"#FF0000", "width":2, "points":[ {"lat":43.65654 ,"lng":-79.90138 },
                                                  {"lat":43.91892 ,"lng":-78.89231 },
                                                  {"lat":43.82589 ,"lng":-79.10040 }
                                                ]
       },
       {"colour":"#008800", "width":4, "points":[ {"lat":43.9078 ,"lng":-79.0264 },
                                                  {"lat":44.1037 ,"lng":-79.6294 },
                                                  {"lat":43.5908 ,"lng":-79.2567 },
                                                  {"lat":44.2248 ,"lng":-79.2567 },
                                                  {"lat":43.7119 ,"lng":-79.6294 },
                                                  {"lat":43.9078 ,"lng":-79.0264 }
                                                ]
       }
   ]
}
 
var myObject2 =
{ "Itinéraire" :
    { "nom" : "Iti-1",
      "Etapes" : [
          { "nom" : "étape-1",
            "Coordonnées": [
                  {"lat" : "1", "lng" : "1", "typepoly" : "0"},
                  {"lat" : "2", "lng" : "2", "typepoly" : "0"},
                  {"lat" : "3", "lng" : "3", "typepoly" : "0"},
                  {"lat" : "4", "lng" : "4", "typepoly" : "1"},
                  {"lat" : "5", "lng" : "5", "typepoly" : "0"}
            ]
          },
          { "nom" : "étape-2",
            "Coordonnées": [
                  {"lat" : "1", "lng" : "1", "typepoly" : "1"},
                  {"lat" : "2", "lng" : "2", "typepoly" : "1"},
                  {"lat" : "3", "lng" : "3", "typepoly" : "1"},
                  {"lat" : "4", "lng" : "4", "typepoly" : "1"},
                  {"lat" : "5", "lng" : "5", "typepoly" : "0"}
            ]
          }
      ]
    }
};
 
var myObject1 = { "P" : { "P-1" : "p-1", "P-12" : "p-12"}, "Q" : "q-1", "R" : { "R1" : { "R2" : "r-2", "R21" : "r-3"}}}
 
var myObject0 = [ "a", [ "b", "c", [ "d0", "d1", "d2", "d3"],],"e", "f", [ "g0", "g1", "g2" ],];
 
// -->
</script>
 
</head>
  <body>
    <form>
      Entrez un objet du modèle :
      <input type="text" id="valObject" name="" value="myObject0"><br>
      Profondeur de visuatisation :
      <input type="text" id="deepObject" name="" value="5"><br>
      <button type="button" value="Voir les propriétés" onClick="retourObj(document.getElementById('valObject').value, document.getElementById('deepObject').value)">
        Voir les propriétés
      </button><br />
      <button type="button" onclick="myObject5.myFunction();" value="">myObject5.myFunction()</button>
    </form>
    <div id="infoObject" style="border:1px solid black; background-color: InfoBackground;	display: none; height: 80%; overflow: auto;">
    </div>
  </body>
</html>

Cela permet l'affichage des tableaux multi-dimensionnels et des variables JSON (peut être utile pour des XHR rebelles... et attention aux injections de fonctions voir myObject5)

A+

PS: si il y a des erreurs, n'hésitez pas à me le dire

[POO] Fonction récursive pour affichage contenu d'un objet en notation JSON

JavaScript

Discussions similaires

Partager

Partager