Discussion :

[Vinc06]

Techno AngularJs, Html

Bonjour à tous,
Je cherche à afficher les valeurs d'un tableau Json dans une page Html et j'ai du mal à trouver l'astuce

Pour les valeur unique ça ne me pose pas de problème !

Code html :

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

1
2
<span ng-if="ecole.classe.niveau === 'CM2'">
Niveau de la classe :{{ecole.classe.niveau.valeur}}</span>

Par contre le nom des élèves est sous forme de tableau : [{"value":"DUPOND"},{"value":"DUPONT"}]

Code html :

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

1
2
<span ng-if="ecole.classe.eleves.noms">
Noms de élèves :{{ecole.classe.eleves.noms}}</span>

Si vous avez l'astuce pour afficher les noms sous la forme "Noms de élèves : DUPOND, DUPONT
Je prends avec plaisir, je vous remercie par avance pour votre aide

[Toufik83]

Bonjour,

Quelle est la structure de l'objet json ?

[Vinc06]

Bonjour Toufik83,
je te remercie sincèrement pour ta réponse.
La structure du Json ressemble à ça :

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
{
   "ecole":{
      "status":"PUBLIQUE",
      "classe":{
         "niveau":"CM2"
      },
      "eleves":{
         "noms":[
            {
               "valeur":"HENRI"
            },
            {
               "valeur":"PAUL"
            }
         ]
      }
   }
}

désolé si ça ne correspond pas exactement à l'exemple de mon tout premier poste

J'ai plus ou moins réussi à afficher chaque nom en indiquant l'entrée du tableau.

Code :

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

{{ecole.eleves.noms[0].valeur}}

Mais ça reste complétement statique, impossible d'ajuster le code pour les classes à 10 ou 25 élèves :/
Si tu sais comment variabiliser l'index du tableau {{ecole.eleves.noms[n].valeur}}, c'est un super coup de main !

[Toufik83]

Bonjour,

Puisque la clé noms est un tableau, tu peux donc le parcourir avec une boucle forEach par exemple et extraire la valeur de chaque item :

Code :

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

1
2
3
4
5
6
 
let json={.....};//la variable json
json.ecole.eleves.noms
.forEach((v,index)=>{
     console.log("nom-"+index+" :",v.valeur);
})

[Vinc06]

Merci beaucoup pour ton aide Toufik83, tu m'as aidé à trouver la solution !!
La solution de ng-repeat correspond parfaitement à mon besoin

Code :

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

<span ng-repeat="noms in ecole.eleves.noms">{{noms.valeur}} </span>

Bonne continuation à tous !