Parcourir un tableau multi-dimensionnel

Version imprimable

Bonjour,
Voilà j'ai un code comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $scope.nouveau = [ { val1:"mavaleur1", val2:"mavaleur2", val3 : [ { moi : "je suis", toi : "tu es" } ], val4 : "quatrième valeur" } ];
dans index.html je fais un ng-repeat (ca c'est ok) mais je voudrais récupérer la valeur "je suis" dans val3....j'ai essayé un truc du genre:
Code:

1 2 3 <p ng-repeat="value in nouveau">{{value.val3['moi']}} </p>
mais ça ne marche pas.
Si vous avez une idée je suis preneur.
Merci !

12/04/2015, 19h35
NoSmoking
Bonjour,
moi n'est pas une propriété de val3 mais du premier objet du premier indice du tableau contenu par val3
Code:

1 2 3 4 5 6 val3 : [ { moi : "je suis", toi : "tu es" } ],
donc on y accède en faisant value.val3[0].moi par exemple.
12/04/2015, 19h39
slim

Citation:

Envoyé par NoSmoking

on y accède en faisant value.val3[0].moi par exemple.

Yes! Sinon, value.val3[0]['moi']
12/04/2015, 20h56
dx007

Merci pour vos réponses, ça marche mais je ne comprends pas la logique du code;

pourquoi val3[0], alors qu'il est déjà remplacé par ['moi'] non, justement pour ne pas avoir une clé (clé:valeur) abstraite (ou numérique) ?
12/04/2015, 21h14
NoSmoking

dans ton code tu déclares val3 comme étant un Array val3 : [..] et non comme un objet val3 : {..}
12/04/2015, 22h08
dx007

je sais bien , mais ce que je voudrais justement comprendre c'est que comme c'est un Array(), ['moi'] ne représenterai pas le premier indice du tableau ?
12/04/2015, 22h28
dx007

Aaah je vois, en fait la valeur du tableau est délimité par les accolades et la clé est en incrément auto...:)
Mais dites-moi si à la place du val3[0]["moi"] je voudrais remplacer le [0] par ["zero"] par exemple; comment écrirait-ton la syntaxe ?
13/04/2015, 11h20
slim

Citation:

Envoyé par dx007

Mais dites-moi si à la place du val3[0]["moi"] je voudrais remplacer le [0] par ["zero"] par exemple; comment écrirait-ton la syntaxe ?

8O Pourquoi ? strange feature...

0 est un indice => cf. documentation Javascript.
13/04/2015, 16h31
dx007

Pourquoi ? strange feature...

--------------------------------------

Pour savoir justement ou est placé exactement cet indice invisible trompeur val3[0] la;:D
13/04/2015, 21h39
NoSmoking
Citation:

Pour savoir justement ou est placé exactement cet indice invisible trompeur val3[0] la;:D

je ne vois pas en quoi cet indice est trompeur, c'est la façon de fonctionner lorsque l'on veut accéder à un élément d'un tableau.

Je pense qu'il faut que tu essaies de comprendre la structure que tu mets en place, ici un Array d'objet, mais tu pourrais utiliser directement un objet
Code:

1 2 3 4 val3 : { moi : "je suis", toi : "tu es" },
Sinon rien ne t'empêche de passer par une variable "constante"
Code:

1 2 3 var zero = 0; var tableau = ['un', 'deux', 'trois']; console.log( tableau[zero]); // >> 'un'
Mais quel est le but recherché !?!

bah en fait le but est de récupérer des emails (par exemple) retourné par le serveur sous un format JSON comme celui-ci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$scope.dossiers = [
		{ value: "RECEPTION", label: 'Boite de réception', emails: [
			{ id: 1, from: "Albator", to: "Rudy", subject: "Je reviens", date: new Date(2014, 2, 20, 15, 30), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id ligula ac sem fringilla mattis. Nullam sodales mi vel semper volutpat. Phasellus lorem leo, luctus a lectus id, posuere aliquet orci. Praesent sit amet ipsum porttitor, tempus odio vel, bibendum mauris. Etiam magna lorem, rhoncus eget euismod ac, lobortis quis." },
			{ id: 2, from: "Capitaine Flam", to: "Rudy", subject: "Bisous de l'espace", date: new Date(2014, 3, 18, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur elementum leo. Curabitur luctus, magna a tempor sodales, orci velit dictum magna, nec pharetra turpis ante vehicula ante. Sed sed libero suscipit, rutrum ligula vel, tempor lorem. Phasellus pulvinar dolor ac velit porttitor pulvinar. Mauris felis quam, consequat at <b>mauris</b>." },
			{ id: 3, from: "Pikachu", to: "Rudy", subject: "Pika pika !", date: new Date(2014, 2, 15, 16, 12), content: "Pika pika ! Chuuuuuu. Pika pika ! Chuuuuuu. Pika pika ! Chuuuuuu. Pika pika ! Pika pika ? Piiiiika Chuuuuuu. Pika pika ! Pikachu. Pika pika pika." },
			{ id: 4, from: "Barbapapa", to: "Rudy", subject: "Hulahup Barbatruc", date: new Date(2014, 2, 15, 14, 15), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur elementum leo. Curabitur luctus, magna a tempor sodales, orci velit dictum magna, nec pharetra turpis ante vehicula ante. Sed sed libero suscipit, rutrum ligula vel, tempor lorem. Phasellus pulvinar dolor ac velit porttitor pulvinar. Mauris felis quam, consequat at <b>mauris</b>." }
		]  }, 
		{ value: "ARCHIVES", label: "Archives", emails: [
			{ id: 5, from: "Candy", to: "Rudy", subject: "Bon anniversaire", date: new Date(2014, 2, 15, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id ligula ac sem fringilla mattis. Nullam sodales mi vel semper volutpat. Phasellus lorem leo, luctus a lectus id, posuere aliquet orci. Praesent sit amet ipsum porttitor, tempus odio vel, bibendum mauris. Etiam magna lorem, rhoncus eget euismod ac, lobortis quis." },
			{ id: 6, from: "Hiro Nakamura", to: "Rudy", subject: "Konichiwa", date: new Date(2014, 2, 18, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur elementum leo. Curabitur luctus, magna a tempor sodales, orci velit dictum magna, nec pharetra turpis ante vehicula ante. Sed sed libero suscipit, rutrum ligula vel, tempor lorem. Phasellus pulvinar dolor ac velit porttitor pulvinar. Mauris felis quam, consequat at <b>mauris</b>." },
			{ id: 7, from: "Asuka Langley Soryu", to: "Rudy", subject: "Ca va chier", date: new Date(2014, 2, 15, 17, 50), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id ligula ac sem fringilla mattis. Nullam sodales mi vel semper volutpat. Phasellus lorem leo, luctus a lectus id, posuere aliquet orci. Praesent sit amet ipsum porttitor, tempus odio vel, bibendum mauris. Etiam magna lorem, rhoncus eget euismod ac, lobortis quis." }
		]  },
		{ value: "ENVOYES", label: "Envoyés", emails: [
			{ id: 8, from: "Rudy", to: "Albator", subject: "Bien la famille ?", date: new Date(2014, 2, 15, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id ligula ac sem fringilla mattis. Nullam sodales mi vel semper volutpat. Phasellus lorem leo, luctus a lectus id, posuere aliquet orci. Praesent sit amet ipsum porttitor, tempus odio vel, bibendum mauris. Etiam magna lorem, rhoncus eget euismod ac, lobortis quis." },
			{ id: 9, from: "Rudy", to: "Capitaine Flam", subject: "Gloubiboulga Night", date: new Date(2014, 2, 18, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur elementum leo. Curabitur luctus, magna a tempor sodales, orci velit dictum magna, nec pharetra turpis ante vehicula ante. Sed sed libero suscipit, rutrum ligula vel, tempor lorem. Phasellus pulvinar dolor ac velit porttitor pulvinar. Mauris felis quam, consequat at <b>mauris</b>." }
		] },
		{ value: "SPAM", label: "Courrier indésirable", emails: [
			{ id: 10, from: "Rue du discount", to: "Rudy", subject: "Envie d'un nouveau frigo ?", date: new Date(2014, 2, 15, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id ligula ac sem fringilla mattis. Nullam sodales mi vel semper volutpat. Phasellus lorem leo, luctus a lectus id, posuere aliquet orci. Praesent sit amet ipsum porttitor, tempus odio vel, bibendum mauris. Etiam magna lorem, rhoncus eget euismod ac, lobortis quis." },
			{ id: 11, from: "Sofinnoga", to: "Rudy", subject: "Besoin d'argent ?", date: new Date(2014, 2, 18, 16, 12), content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur elementum leo. Curabitur luctus, magna a tempor sodales, orci velit dictum magna, nec pharetra turpis ante vehicula ante. Sed sed libero suscipit, rutrum ligula vel, tempor lorem. Phasellus pulvinar dolor ac velit porttitor pulvinar. Mauris felis quam, consequat at <b>mauris</b>." }
		] }

Je veux recupérer tous les champs "emails" dans un tableau avec un ng-repeat par exemple...
Ensuite de faire un ng-click sur un mail en particulier et qu'il m'affiche le mail correspondant.

Citation:

Envoyé par dx007

Je veux recupérer tous les champs "emails" dans un tableau avec un ng-repeat par exemple...
Ensuite de faire un ng-click sur un mail en particulier et qu'il m'affiche le mail correspondant.

soit tu fais ça dans on controleur (préparer le tableau emails soit tu mets deux ng-repeat imbriqués dans le template (html)

La deuxieme solution est meilleure car tu ne perds pas la référence vers les propriétés "value" et "label".

Alors pour la première solution, je te propose d'utiliser underscore.js pour récupérer toutes les propriétés "emails" de ton tableau d'un coup :

Code:

$scopre.emails = _.pluck($scope.dossiers, 'emails');

Sinon, tu devra faire des boucles imbriquées pour construire ton tableau emails.

Deuxieme solution :
Code:

1 2 3 4 5 6 7 <div ng-repeat="dossier in dossiers"> <ul> <li ng-repeat="email in dossier.emails"> <a href="{{email.subject}}">{{email.subject}}</a> </li> </ul> </div>

14/04/2015, 21h00
dx007

Je vais opter pour la deuxième solution. Tou ensachant que si par exemple dans email j'avais un autre array il faudrait que je fasse une autre boucle à l'intérieur du <li/>...je sais c'est démentiel mais c'est pour comprendre un peu davantage ces points de soutures entre les array[] en JS (qui est bien différente de php..:lol:)

Merci beaucoup à tous !

Citation:

Envoyé par dx007

il faudrait que je fasse une autre boucle à l'intérieur du <li/>

Tu n'es pas obligé d'utilser les listes :wink:
tu peux tout à fait faire ceci :
Code:

1 2 3 4 5 6 7 <div ng-repeat="dossier in dossiers"> <div ng-repeat="email in dossier.emails"> <div ng-repeat="whatever in email.whatever"> <div> {{whatever}} </div> </div> </div> </div>

15/04/2015, 12h00
dx007

et si whatever = [{}] ; (?)

En fait le but c'est d'avoir une astuce pour parcourir l'objet de tableau qui elle-même serait un tableau, et cela à n'importe quel niveau du code....d’où l'intitulé de ce post: "pacourir un tableau multi-dimensionnel"
Mais tu as tout a fait raison, c'est juste cette astuce qui me manque à chaque fois ;)
15/04/2015, 12h59
slim

Citation:

Envoyé par dx007

et si whatever = [{}] ; (?)

Pareil, tu reboucle dessus.

Citation:

Envoyé par dx007

d’où l'intitulé de ce post: "pacourir un tableau multi-dimensionnel"

Au fait, ici, on ne parle pas de tableau multi dimensionnel. On ne parque que de tableaux imbriqués.

tableau imbriqués : montableau = ["value1": ["1", "2"]]tableaux multi dimensionnels : montableau = ["1", "3"]["1", "2"] qui nous donne une matrice !

[EDIT] ma dernière phrase est discutable... on peut parler de tableaux multidimensionnels pour les deux cas. Je voulais juste dire que pour boucler dessus, tu fais comme si tu accédais à une propriété d'un objet.
D'ailleurs, si tu vois la spéc ECMA5, l'accès à une propriété d'un objet ou à un indice d'un tableau se fait de la même manière... :wink: [/EDIT]
17/04/2015, 18h42
dx007

Ca rentre en profondeur on dirait, plus on va loin dans le tableau...hihi.
ECMA..... quoi??????:D

Merci pour tout Slim en tout cas, j'espère ne pas être confronté à ce genre de cas un jour.......
18/04/2015, 13h20
slim

Citation:

Envoyé par dx007

ECMA..... quoi??????

C'est la spécification sur laquelle repose le javascript... : ici

Citation:

Envoyé par Wikipedia

Il s'agit donc d'un standard, dont les spécifications sont mises en œuvre dans différents langages de script, commeJavaScript ou ActionScript, ainsi qu'en C++ (norme 2011). C'est un langage de programmation orienté prototype.