afficher fichier json

**boboss123** · 24/12/2010, 09h32

Bonjour,

via Ajax, je récupère et parse un fichier json qui contient des variables, objet, tableau : jusque la pas de problème, j'arrive à utiliser mes variables.

Ce que j'aimerais faire c'est une fonction de debug qui m'afficherait dans un div toutes mes variables avec leur structure à partir de la variable contenant les information du fichier json parsé. Y a t-il moyen de faire ça ? je ne vois pas trop comment parcourir mes variables issues du fichier json et afficher leur nom/valeur

merci d'avance

**le_chomeur** · 24/12/2010, 09h50

En gros il faut faire une fonction récursive pour appeler tous les objets enfants mais les bases seraient ça :

Code :

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

1
2
3
4
5
 for (elt in obj){
     for (coord in obj[elt]){
       TADIV.innerHTML += elt+'=>'+coord+':'+obj[elt][coord];
     }
   }

**boboss123** · 24/12/2010, 10h22

merci pour ton aide mais je n'arrive toujours pas a voir comment afficher ce type de variable :

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
 
var jsonVar = {
	"obj1" : "val1",
 
	"obj2" : {
		"obj3" : 1, 
		"obj4" : 2,
 
		"obj5" : {
			"obj6" : "val6",
			"obj7" : "val7",
			"obj8" : ["val8", "val9", "val10"]
		}
	},
 
	"obj11" : ["val11", "val12", "val13"]
}

=> je ne vois pas comment faire pour savoir si un élément contient une valeur ou un objet ou un tableau pour pouvoir faire ma fonction récursive ....

**le_chomeur** · 24/12/2010, 10h32

il te faut utiliser l'opérateur typeof qui te renvois une string t'indiquant le type de la variable :

dans la boucle , tu tests chacun des éléments , si c'est une variable simple tu l'affiches , si c'est un tableau ou un objet tu rappels la fonction récursivement

**boboss123** · 24/12/2010, 10h35

ok, merci

ou puis-je trouver la liste des valeurs que peut me renvoyer la fonction typeof ?

typeof renvoie bien une variable de type string ? la valeur retourné ne dépend pas du webbrowser utilisé au moins ?

**le_chomeur** · 24/12/2010, 10h50

Les valeurs renvoyées possibles sont:
boolean (variable OUI/NON),
string (variable de chaîne de caractères),
number (variable numérique),
function (fonction),
object (objet),
undefined (type indéterminé).

sur tous les browser

**boboss123** · 24/12/2010, 11h44

ok merci beaucoup

j'ai commencé à faire ma fonction de debug (j'utilise jquery) :

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
 
var jsonVar = {
	"var1" : "val1",
 
	"obj2" : {
		"var3" : 1, 
		"var4" : true,
 
		"obj5" : {
			"var6" : "val6",
			"var7" : "val7",
			"tab8" : ["val8", "val9", "val10"]
		}
	},
 
	"tab11" : ["val11", "val12", "val13"],
}
 
 
function AfficheJsonVar(div){
	var debugStruct;
	debugStruct = $("<ul/>");
 
	parcoursObj(jsonVar, debugStruct);
 
	debugStruct.appendTo(div);
}
 
function parcoursObj(obj, parentNode){
 
	var type = typeof(obj);
 
 
	$(parentNode).append(tempNode);
 
	switch (type){
		case "object":
			for (key in obj){
				var tempNode = $("<li/>").text(key);
				var tempNode2 = $("<ul/>");
 
				$(tempNode).append(tempNode2);
				$(parentNode).append(tempNode);
 
				parcoursObj(obj[key], tempNode2);
			}
			break;
 
		case "string":
		case "number":
		case "boolean":
			$("<li/>", {"text" : ".val: " + obj}).appendTo(parentNode);
			break;
 
		case "function":
		case "undefined ":
		default:
			alert(typeof(obj));
	}
 
}

=> mais ça marche pas complètement :
- comment faire pour qu'il n'y ai pas de sous nœud créé pour les variables => que le nom de la variable soit sur la même ligne que sa valeur ?
- et qu'il n'y ai pas l'index des tableau qui soit affiché (mettre directement les valeurs sous forme de liste)

**boboss123** · 14/01/2011, 08h55

j'ai trouvé un système qui à l'air d'assez bien fonctionner (ça fait le même affichage que sous firebug) :

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
 
// ************************************************
function AfficheJsonVar(div, data){
	var debugStruct;
 
	$(div).empty();
 
	debugStruct = $("<ul/>");
 
	parcoursObj(data, debugStruct);
 
	debugStruct.appendTo(div);
}
 
function parcoursObj(obj, parentNode){
 
	var type = typeof(obj);
 
	switch (type){
		case "object":
			for (key in obj){
 
				if(typeof(obj[key]) == "object"){
					var tempNode;
 
					if(typeof(obj[key].length) == "undefined"){
						tempNode = $("<li/>").text(key);
					} else {
						tempNode = $("<li/>").text(key + "[" + obj[key].length + "]");
					}
 
					var tempNode2 = $("<ul/>");
 
					$(tempNode).append(tempNode2);
					$(parentNode).append(tempNode);
					parcoursObj(obj[key], tempNode2);
 
				} else {
					$("<li/>", {"text" : key + ": " + obj[key]}).appendTo(parentNode);
				}
			}
			break;
 
		//case "string":
		//case "number":
		//case "boolean":
			//$("<li/>", {"text" : ".val: " + obj}).appendTo(parentNode);
			//break;
 
		//case "function":
		//case "undefined ":
		default:
			alert(typeof(obj));
	}
 
}

**Willpower** · 16/01/2011, 14h28

En javascript les objets ne sont que des références vers un objet. Donc un objet peut facilement se contenir lui-même. Un parcours de cette objet mènerait donc à une boucle infinie. ;-)

**Willpower** · 17/01/2011, 11h39

Envoyé par Willpower

En javascript les objets ne sont que des références vers un objet. Donc un objet peut facilement se contenir lui-même. Un parcours de cette objet mènerait donc à une boucle infinie. ;-)

Solution en rajoutant 3 lignes à la fonction de parcours:

Code js :

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

1
2
3
4
5
6
7
8
function parcoursObj(obj, parentNode){
  if( obj.dejaTraiteDansUnAppelParent ) return;
  obj.dejaTraiteDansUnAppelParent = true;
 
  // reste du code de la fonction
 
  delete obj.dejaTraiteDansUnAppelParent;
}

La beauté de la recursivité, c'est que cela n'empechera pas un meme objet d'être traité/affiché plusieurs fois dans une boucle ou dans des sous-objets différents, cela empêchera uniquement l'appel à la fonction sur l'objet s'il est contenu dans lui-meme ou un objet parent appartenant à lui-même. Autrement dit, cela bloque uniquement le cas de parcours infini.

Exemple simple d'objet se contenant lui-meme :

Code js :

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

var jsonObj = new (function(){this.myObj = {owner : this }; })();

Édit:
ou un exemple qui te sera peut-être plus parlant d'objet se contenant lui-même :

Code js :

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

1
2
3
4
5
6
7
8
 var obj = {};
obj.subObj = {};
obj.subObj.parentObj = obj;
 
// dans mes 2 exemples, je n'ai pas fait d'objet se contenant DIRECTEMENT lui-même du genre :
var obj = {};
obj.myself = obj;
// parce que dans la pratique ça n'aurait aucun sens de le faire.

NB: je n'ai ni testé mes 3 lignes de code ni mes exemples car je suis sur gsm. S'il y a des erreurs, merci de me corriger .

**sekaijin** · 17/01/2011, 18h00

un paquet JSON ne doit pas contenir de référence

si en javascript je peux faire

Code :

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

1
2
test = 45;
a={test:1, toto : test};

un paquet jSON

Code :

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

{test:1, toto : test}

est invalide
la référence est interdite par JSON

voici ce que donne Fire bug

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//méthode pour le parsing JSON conforme à la norme et native FF
JSON.parse => parse() 
 
//appel de parse sur {a:document} une référence à l'objet document
JSON.parse('{a:document}') => SyntaxError: JSON.parse
[Stopper sur une erreur]
 
// evaluation de la même chaine par le moteur javascript
{a:document} => Document javascript
 
// evaluation de l'objet document par le moteur javascript
document => Document javascript

autre exemple

Code :

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

1
2
JSON.parse('{a:45, b:a}') => SyntaxError: JSON.parse
[Stopper sur une erreur]

Pas de référence interne

A+JYT

**Willpower** · 17/01/2011, 18h21

Envoyé par sekaijin

un paquet JSON ne doit pas contenir de référence

si en javascript je peux faire

Code :

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

1
2
test = 45;
a={test:1, toto : test};

un paquet jSON

Code :

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

{test:1, toto : test}

est invalide
la référence est interdite par JSON

voici ce que donne Fire bug

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//méthode pour le parsing JSON conforme à la norme et native FF
JSON.parse => parse() 
 
//appel de parse sur {a:document} une référence à l'objet document
JSON.parse('{a:document}') => SyntaxError: JSON.parse
[Stopper sur une erreur]
 
// evaluation de la même chaine par le moteur javascript
{a:document} => Document javascript
 
// evaluation de l'objet document par le moteur javascript
document => Document javascript

autre exemple

Code :

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

1
2
JSON.parse('{a:45, b:a}') => SyntaxError: JSON.parse
[Stopper sur une erreur]

Pas de référence interne

A+JYT

Ok ma remarque est tout à fait hors sujet alors. Juste en tenir compte pour les autres cas au cas où il utiliserait la fonction pour également parcourir des objets non json. :-)

afficher fichier json

JavaScript

Discussions similaires

Partager

Partager