Discussion :

[dx007]

Bonjour,
Voilà j'ai un code comme 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
 
 $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 :

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

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 !

[NoSmoking]

Bonjour,
moi n'est pas une propriété de val3 mais du premier objet du premier indice du tableau contenu par val3

Code :

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

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.

[slim]

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

Yes! Sinon, value.val3[0]['moi']

[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) ?

[NoSmoking]

dans ton code tu déclares val3 comme étant un Array val3 : [..] et non comme un objet val3 : {..}

[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 ?

[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 ?

[slim]

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

Pourquoi ? strange feature...

0 est un indice => cf. documentation Javascript.

[dx007]

Pourquoi ? strange feature...

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

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

[NoSmoking]

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

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 :

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

1
2
3
4
val3 :  {
    moi : "je suis",
    toi : "tu es"
},

Sinon rien ne t'empêche de passer par une variable "constante"

Code :

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

1
2
3
var zero = 0;
var tableau = ['un', 'deux', 'trois'];
console.log( tableau[zero]);  // >> 'un'

Mais quel est le but recherché !?!

[dx007]

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 :

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

[slim]

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 :

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

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

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

Deuxieme solution :

Code :

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

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>

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

Merci beaucoup à tous !

[slim]

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

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

Code :

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

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>

[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

[slim]

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

Pareil, tu reboucle dessus.

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... [/EDIT]

[dx007]

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

Merci pour tout Slim en tout cas, j'espère ne pas être confronté à ce genre de cas un jour.......

[slim]

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

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

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 programmationorienté prototype.