Discussion :

[gtraxx]

Bonjour je rencontre un petit souci, j'ai construit un fichier json qui doi en principe retourner une série d'élément (rien de compliqué) mais également des sous éléments dynamique.
Mon problème est dans l'affichage de ses même éléments, je ne parviens pas à trouver la bonne méthode pour avoir mes sous éléments dans un tableau html.
J'ai quand alors modifier et tester divers structure json de ce type mais sans succès, en général ma structure est simple et je peux donc les manipulé à ma guise, ce cas présent sort un peu du lot.
Mon format JSON (qui est peut être incorrect au niveau de l'élément kind étant le conteneur de sous éléments)

Code :

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

1
2
3
4
5
6
7
8
 
[{"idmovies":"0000014","m_name":"machin truc","kind":["null"]},
{"idmovies":"0000008","m_name":"machin truc","kind":["null"]},
{"idmovies":"0000007","m_name":"machin truc","kind":["null"]},
{"idmovies":"0000006","m_name":"machin truc","kind":["null"]},
{"idmovies":"0000004","m_name":"machin truc","kind":["null"]},
{"idmovies":"0000003","m_name":"machin truc","kind":["null"]},
{"idmovies":"0000001","m_name":"machin truc","kind":["aventure", "action"]}]

La partie JS dans la requête json qui doit en principe construire un tableau html :

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
var tblFilm = '<table class="ui-widget ui-widget-content" id="tablecontain">'
					+'<thead><tr class="ui-widget ui-widget-header">'
					+'<th>ID</th>'
					+'<th>Langue</th>'
					+'<th style="min-width:120px;">Titre</th>'
					+'<th style="min-width:120px;">Kind</th>'
					+'<th style="width:1%;"><span class="lfloat ui-icon ui-icon-pencil"></span></th>'
					+'<th style="width:1%;"><span class="lfloat ui-icon ui-icon-closethick"></span></th>'
					+'</tr></thead>'
					+'<tbody>';
    			tblFilm += '</tbody></table>';
				$(tblFilm).appendTo('#load_film_listing');
				if(j === undefined){
					console.log(j);
				}
				if(j !== null){
					$.each(j, function(i,item) {
						var kind_elem = '';
						if(item.kind[i] != null){
							var kind_max = count(item.kind[i]);
							for (var d=0;d<kind_max;d++) {
								kind_elem += d;
							}
						}
						return $('<tr>'
						+'<td>'+item.idmovies+'</td>'
						+'<td>'+item.idmovies+'</td>'
						+'<td>'+item.m_name+'</td>'
						+'<td>'+kind_elem+'</td>'
						+'</tr>').appendTo('#tablecontain tbody');
					});
				}

La partie non fonctionnelle est la suivante :

Code :

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

1
2
3
4
5
6
7
var kind_elem = '';
						if(item.kind[i] != null){
							var kind_max = count(item.kind[i]);
							for (var d=0;d<kind_max;d++) {
								kind_elem += d;
							}
						}

Je suis probablement à côté de la plaque mais si mon json vous semble correct peut être pourriez vous m'aider pour le JS

[SpaceFrog]

Code :

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

item[0].idmovie

?

[Bovino]

Code :

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

1
2
3
$.each(j, function(i,item) {
	var kind_elem = '';
	if(item.kind[i] != null){

Tu commets une petite erreur de logique.
Dans le callback de each(), le paramètre i correspond au rang de l'objet en cours dans la collection, il n'a donc aucun rapport avec les éléments contenus dans chaque tableau kind.
Par exemple, à la 2e itération, i vaudra 1, mais kind[1] n'existe pas, donc erreur, donc arrêt de l'exécution du script !
Il faut refaire une boucle sur le tableau kind à chaque itération.

[gtraxx]

Bonjour SpaceFrog, Bovino
ok donc si je comprend bien je dois faire :

Code :

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

1
2
3
4
var kind_elem = [];
$.each(item.kind, function(d, val) {
	kind_elem.push(val);
});

Sinon au niveau json c'est bon ?
Je parle bien entendu de "kind":["aventure", "action"]

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
strkind='[{"idmovies":"0000014","m_name":"machin truc","kind":["null"]}, \
{"idmovies":"0000008","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000007","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000006","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000004","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000003","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000001","m_name":"machin truc","kind":["aventure", "action"]}]'
 
kind=eval('('+strkind+')')
 
alert(kind[3].idmovies)

[gtraxx]

Avec :

Code :

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

1
2
3
4
var kind_elem = [];
$.each(item.kind, function(d, val) {
	kind_elem.push(val);
});

Sa fonctionne mais j'avoue que j'analyse beaucoup la structure du json et le fait d'utiliser "kind":["aventure", "action"] est plutôt simple tout compte fait.
Mais si je souhaite avoir une structure plus complexe du genre :
"kind":[{"montruc":"aventure"}, {"montruc":"action"}]
Je suppose que mon each sera un peu plus complexe ?
Je me base sur la doc JSON : http://json.org/example.html

[SpaceFrog]

as tu regardé le code ci dessus ?

[gtraxx]

Heu oui mais je vais être franc je suis un anti eval , donc je me suis dit pourquoi ne pas tenter autre chose, pour le moment la méthode proposé par Bovino fonctionne mais j'avoue que je préfère tout de même me renseigner sur le JSON en lui même pour un cas plus complexe (et surtout syntaxiquement parlant)

[SpaceFrog]

oui clair moi aussi anti éval ...

c'est juste un exemple pour te montrer comment utiliser la structure données ci dessus

[Bovino]

Spaffy : les valeurs kind recherchées sont celles présentes dans le JSON

Sinon :

Code :

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

1
2
3
4
5
6
7
8
var strjson='[{"idmovies":"0000014","m_name":"machin truc","kind":["null"]}, \
{"idmovies":"0000008","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000007","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000006","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000004","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000003","m_name":"machin truc","kind":["null"]},\
{"idmovies":"0000001","m_name":"machin truc","kind":["aventure", "action"]}]';
var allJSON = JSON.parse(strjson);

[gtraxx]

Juste pour info dans le cas ou j'utiliserai parseJSON.
J'ai essayer ceci :

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
var tblFilm = '<table class="ui-widget ui-widget-content" id="tablecontain">'
							+'<thead><tr class="ui-widget ui-widget-header">'
							+'<th>ID</th>'
							+'<th>Langue</th>'
							+'<th style="min-width:120px;">Titre</th>'
							+'<th style="min-width:120px;">Kind</th>'
							+'<th style="width:1%;"><span class="lfloat ui-icon ui-icon-pencil"></span></th>'
							+'<th style="width:1%;"><span class="lfloat ui-icon ui-icon-closethick"></span></th>'
							+'</tr></thead>'
							+'<tbody>';
		    			tblFilm += '</tbody></table>';
						$(tblFilm).appendTo('#load_film_listing');
						if(j === undefined){
							console.log(j);
						}
						if(j !== null){
 
							var allJSON = JSON.parse(j);
							return $('<tr>'
							+'<td>'+allJSON.idmovies+'</td>'
							+'<td>'+allJSON.idmovies+'</td>'
							+'<td>'+allJSON.m_name+'</td>'
							+'<td>'+allJSON.kind+'</td>'
							+'<td><a href="/movies.php?edit_film='+allJSON.idmovies+'" title="Editer '+allJSON.m_name+'"><span class="lfloat ui-icon ui-icon-pencil"></span></a></td>'
							+'<td><a class="del-film" href="#" rel="'+allJSON.idmovies+'" title="Suppression de '+allJSON.m_name+'"><span class="lfloat ui-icon ui-icon-closethick"></span></a></td>'
							+'</tr>').appendTo('#tablecontain tbody');
 
						}

Sa ne fonctionne pas mais j'ai juste jeter le code comme sa histoire de voir le résultat donc ne pas taper
C'est juste pour tester, le each() ci plus haut fonctionne bien