afficher fichier json

Version imprimable

24/12/2010, 09h32
boboss123

afficher fichier json

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

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

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

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

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 ....

24/12/2010, 10h32
le_chomeur

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 :)
24/12/2010, 10h35
boboss123

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 ?
24/12/2010, 10h50
le_chomeur

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 ;)

ok merci beaucoup

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

Code:

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)

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

Code:

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));
	}
 
}

16/01/2011, 14h28
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. ;-)

Citation:

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:

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:

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:

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 .

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

si en javascript je peux faire
Code:

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

Code:

{test:1, toto : test}

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

voici ce que donne Fire bug
Code:

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:

1 2 JSON.parse('{a:45, b:a}') => SyntaxError: JSON.parse [Stopper sur une erreur]
Pas de référence interne

A+JYT

Citation:
Envoyé par sekaijin
un paquet JSON ne doit pas contenir de référence

si en javascript je peux faire
Code:

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

Code:

{test:1, toto : test}

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

voici ce que donne Fire bug
Code:

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:

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. :-)