Récupérer un tableau à plusieurs dimension reçu avec ajax (json)

Version imprimable

Salut à tous ! Je suis actuellement en train de découvrir le web, et plus précisément le Jquery et l'ajax en ce moment.

Il y a quelque chose que je ne comprend pas, ce sont les objets en Jquery, plus précisément un objet que j'ai assemblé avec jQuery.parseJSON.

Je vous explique, je fais une requête ajax de cette facon :
Code:

1 2 3 4 5 6 7 8 $.ajax({ url: 'ajax_requests.php', success: function(data) { var pics_data = jQuery.parseJSON(data); alert(data); //affiche correctement ma requete JSON alert(pics_data); // affiche que c'est un objet } });
La requette ajax c'est celle ci :
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 { "landscape":[ { "name":"2009_un_nantes_4834_bandeau.jpg", "date":1374659447, "width":640, "height":253 }, { "name":"nantertrdtes.jpg", "date":1374659419, "width":3834, "height":2730 }, { "name":"nantes.jpg", "date":1374659381, "width":800, "height":536 }, { "name":"original_nantes-1131.jpg", "date":1374659396, "width":1200, "height":800 } ], "portrait":[ { "name":"images.jpg", "date":1374659437, "width":194, "height":259 }, { "name":"Nantes-_la_tour_lu.jpg", "date":1374758570, "width":900, "height":1250 } ] }
Il s'agit d'un tableau à 3 dimensions (formaté en Json), dont le tableau est organisé de cette facon :

tab[TYPE][ID]['name'] => 'name' de l'image ID de type TYPE
tab[TYPE][ID]['date'] => date de modification de l'image ID de type TYPE en timestamp.
tab[TYPE][ID]['width'] => largeur en pixels de l'image ID de type TYPE.
tab[TYPe][ID]['height'] => hauteur en pixels de l'image ID de type TYPE.

(où TYPE est soit 'landscape' soit 'portrait', et ID est un int).

J'aurai voulu récupérer ce meme tableau dans mon code jQuery, et non un objet, j'ai essayé de parcourir l'objet, mais après plusieurs recherche, je coince, j'ai essayé de parcourir cet objet avec plusieurs boucles utilisant jQuery.each() que j'ai trouvé sur internet sans avoir pu les comprendre mais pas moyen.

Merci pour votre aide :D

Bonsoir

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
var jqXHR = $.getJSON( "test.json" ); // dans mon test ou un fichier PHP qui retourne du JSON
 
jqXHR.done( function( data, textStatus, jqXHR ){
	// succès de la transaction, on doit traiter le contenu de data
	console.log( data, textStatus, jqXHR );
 
	// data est déjà un objet JS, parseJSON est exécuté par la transaction AJAX
	// exemples
 
	console.log( data.landscape, data.portrait );
 
	$( data.landscape ).each( function( i, item ){
		console.log( i, item, item.name );
	});
 
	console.log( data[ "landscape" ][ 1 ][ "width" ], data[ "portrait" ][ 1 ][ "name" ] );
 
});
 
jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
	// échec de la transaction, gérer la catastrophe
	console.log( jqXHR, textStatus, errorThrown );
 
});

Voir http://api.jquery.com/category/ajax/shorthand-methods/ et la :faq: http://javascript.developpez.com/faq...ax#AjaxRequest

Citation:
Envoyé par krizentherm
Code:

1 2 3 4 5 6 7 8 $.ajax({ url: 'ajax_requests.php', success: function(data) { var pics_data = jQuery.parseJSON(data); alert(data); //affiche correctement ma requete JSON alert(pics_data); // affiche que c'est un objet } });
lorsque tu 'alert(data)' tu n'affiche pas réellement ton tableau mais en fait une chaine de caractère qui correspond à ton tableau.

normalement si tu fait alert(data[0]) il ne t'afficheras que le premier caractère.

Pour ce qui est du javascript (si j'ai bien tout compris) un tableau est un considérer comme un objet avec un prototypage spéciale (méthodes propres).
Ce qui n'est pas plus mal à mon sens puisque plus simple d'accès.

bref si je déclare:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var obj = { prenom: 'Jean', nom: 'Bon' }; console.log( obj.prenom +' && '+obj.nom ); /*==> 'Jean && Bon'*/ var tab = [ 'Jean', 'Bon' ]; console.log( tab[0] +' && '+tab[1] ); /*==> 'Jean && Bon'*/ console.log( tab['0']+' && '+tab['1'] ); /*==> 'Jean && Bon'*/ console.log( Obj[0]+' && '+Obj[1] ); /*==> Impossible*/ console.log( tab.0+' && '+tab.1 ); /*==> Impossible*/
la différence est intéressante sur la 3ème ligne car on peut utiliser l'index numérique comme une clé

Lorsque que tu récupères tes données ajax et que tu les convertis en JSON ( format normaliser )
tu obtiendras toujours un objet ( je crois :) )

pour y accéder je te conseille d'abord de savoir comment il se structure pour cela alert(pics_data) ne peut pas t'aider.
essaye console.log( pics_data ); cela devrais te fournir d'avantage d'information.

Au vue de tes données je dirais que tu auras quelque chose comme ça

Object
-->landscape[4]
-->Object
-->'name': 2009_un_nantes_4834_bandeau.jpg
-->'date': 1374659447
-->'width': 640
-->'height': 253
-->Object
-->Object
-->Object
-->portrait[2]
-->Object
-->Object

29/07/2013, 15h30
krizentherm

Merci pour vos réponses ! ;)

Ca m'a fait comprendre qu'en JS on peut pas manipuler les tableaux comme en c, du coup j'ai crée un tableau pour chaque sous dimensions au fur et à mesure puis les assembler dans un tableau pour créer une dimension.

Maintenant c'est nickel j'ai mon tableau associatif a plusieurs dimensions :D
29/07/2013, 17h15
Darkaurora

Le système est plus compliqué à comprendre surtout si tu as appris à dev en C, mais au final il est plus intéressant et plus complet qu'en C mais malheureusement plus contraignant sur certains points.