J'obtiens des données d'un serveur de printemps en JSON, les données sont bien récupérées, mais lorsque j'essaye de faire un foreach sur eux dans mon composant Angular, j'obtiens l'erreur suivante: Impossible de lire la propriété Affaires d'undefined
affaire:
page:
number: 0
size: 20
totalElements: 118
totalPages: 6
__proto__: Object
_embedded:
affaires: Array(20)
0: {id: 1, sn: "A129B", zc: null, certificat: null, etat: false, …}
1: {id: 2, sn: "1196M", zc: null, certificat: null, etat: false, …}
2: {id: 3, sn: "784M", zc: null, certificat: null, etat: false, …}
3: {id: 4, sn: "565M", zc: null, certificat: null, etat: false, …}
4: {id: 5, sn: "B161B", zc: null, certificat: null, etat: false, …}
5: {id: 6, sn: "A446B", zc: null, certificat: null, etat: false, …}
6: {id: 7, sn: "862M", zc: null, certificat: null, etat: false, …}
7: {id: 8, sn: "1594", zc: null, certificat: null, etat: false, …}
8: {id: 9, sn: "B112B", zc: null, certificat: null, etat: false, …}
9: {id: 10, sn: "40080", zc: null, certificat: null, etat: false, …}
10: {id: 11, sn: "A704B", zc: null, certificat: null, etat: false, …}
11: {id: 12, sn: "869M", zc: null, certificat: null, etat: false, …}
12: {id: 13, sn: "B069B", zc: null, certificat: null, etat: false, …}
13: {id: 14, sn: "930B", zc: null, certificat: null, etat: false, …}
14: {id: 15, sn: "1698", zc: null, certificat: null, etat: false, …}
15: {id: 16, sn: "287B", zc: null, certificat: null, etat: false, …}
16: {id: 17, sn: "B887B", zc: null, certificat: null, etat: false, …}
17: {id: 18, sn: "C875B", zc: null, certificat: null, etat: false, …}
18: {id: 19, sn: "A747B", zc: null, certificat: null, etat: false, …}
19: {id: 20, sn: "118BTC", zc: null, certificat: null, etat: false, …}
length: 20
__proto__: Array(0)
__proto__: Object
_links: {first: {…}, self: {…}, next: {…}, last: {…}, profile: {…}}
__proto__: Object
Voici l'appel de mon API:
@Injectable()
export class AffairesResolver implements Resolve<Affaire> {
constructor(private affaires: AffaireService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
return this.affaires.getAllAffaires();
}
}
Et voici mon résolveur:
//Connexion avec le serveur
export class AffaireService {
public host: string="http://localhost:8080";
constructor(private httpClient:HttpClient) {}
public getAllAffaires(){
return this.httpClient.get(this.host+"/affaires");
}
}
ÉDITER :
Voici le contenu de ma variable listeAffaires:
constructor(private serviceFam:FamillesService, private
serviceAff:AffaireService, private router:Router, private route:
ActivatedRoute) {
this.listeFamilles = this.route.snapshot.data;
this.listeAffaires = this.route.snapshot.data
for(let a of this.listeAffaires._embedded.affaires){
console.log(a.sn);
}
}
4 Réponses :
for(let a of this.listeAffaires._embedded.affaires){
if(this.listeAffaires._embedded.affaires) console.log(a.sn);
}
Adding checks like I suggested above should fix your problem
Mais ne faites-vous pas déjà appel à undefined avant d'arriver au if?
Juste pour faire une note ici, la valeur par défaut 'TSLint' vous dira if statements must be braced (curly)
En fait, ma variable listeAffaires est bien remplie, mais quand je fais un foreach dessus, et que j'essaye de m'embarquer, ça me renvoie l'erreur ne peut pas lire la propriété d'undefined
@ChiefTwoPencils Chaque fois que je ne suis pas défini, j'ajoutais des chèques et cela fonctionnait toujours dans mon cas. C'est pourquoi j'ai suggéré
Essayez d'utiliser paramMap et get variables d'itinéraire:
this.route.paramMap
.subscribe(params => {
for (let key in params) {
if(params.hasOwnProperty(key)) {
console.log(key + ": " + params[key]);
}
}
});
Pour lire les paramètres comme observables:
this.route.paramMap
.subscribe(params => {
let id = params.get('id');
console.log(id);
});
MISE À JOUR:
Si vous souhaitez parcourir les paramètres:
let id = this.route.snapshot.paramMap.get('id');
Après avoir vu la dernière partie de votre code (la réponse JSON), j'ai l'impression que vous devriez parcourir le this.listeAffaires.affaires non le this.listeAffaires._embedded.affaires .
constructor(private serviceFam:FamillesService, private
serviceAff:AffaireService, private router:Router, private route:
ActivatedRoute) {
this.listeFamilles = this.route.snapshot.data;
this.listeAffaires = this.route.snapshot.data
for(let a of this.listeAffaires.affaires){
console.log(a.sn);
}
}
Voici un exemple qui fait la même chose que vous essayez.
Merci pour votre aide, mais je ne le pense pas car je dois cliquer sur ._embedded pour voir le contenu de "affaires".
Donc, la structure est plus comme ça. `listeAffaires: {affaire: {page: {number: 0, size: 20}, totalElements: 118, ... otherFields, _embedded: {affaires: [...]}}}`
Oui, ça l'est. Je ne comprends vraiment pas pourquoi j'ai cette erreur, car j'ai l'objet, je peux le voir dans la console mais je ne peux pas le parcourir ...
consultez le stackblitz, dites-moi s'il diffère avec votre implémentation, et dites-moi quand et où vous enregistrez les données renvoyées par le résolveur.
J'ai eu le même problème que vous, j'essayais d'itérer sur un objet renvoyé par Spring DATA, qui comprenait bien sûr le _embedded. Dans mon cas, j'ai utilisé foreach mais à l'intérieur de ngOnInit () et j'ai eu la même erreur.
La SOLUTION est de mettre le foreach dans une fonction subscribe () et d'appeler cette fonction dans ngOnInit (), je ne sais pas pourquoi cela se produit mais cela a quelque chose à voir avec les fonctions synchrones et asynchrones.
J'espère que cela aiderait quelqu'un un jour.
Edit : Voici le code dactylographié:
J'obtiens les données du backend, puis je les stocke dans l'objet cars, et dans la même méthode subscribe (), j'itère sur cars._embedded.cars et stocke l'id et le modele dans une liste déroulante ArrayCars.
ngOnInit(): void {
this.onGetCars();
}
Ensuite, vous appelez simplement la méthode dans ngOnInit () et vous vous assurez ainsi que this.cars._embedded.cars ne sera pas this.cars._embedded.cars .
dropdownCars = [];
public cars: any = {} ;
onGetCars(){
this.bankservice.getCars()
.subscribe(data => {
this.cars = data;
this.cars._embedded.cars.forEach(element => {
this.dropdownCars.push(
{id: element.id ,
modele: element.modele});
});
}, err => { console.log(err); } );
}
Qu'avez-vous essayé jusqu'à présent, quelle est la réponse du serveur?
Où passez-vous cet appel API et récupérez-vous les données? Ici, vous ne montrez qu'une tentative d'analyse des données d'ActivatedRoute, une chose complètement différente.
J'ai modifié ma question afin que vous puissiez voir comment je passe mon appel API
Pouvez-vous nous montrer une partie du JSON stocké dans
listeAffaires?J'ai édité mon message