Discussion :

[Patrice.Newbie]

Bonjour,
Je débute avec Angular et j'essaie de créer un frontend pour une ancienne application en Django.
Le serveur API est un Django Rest Framewrok.
Je tente de récupérer les données en ayant mis en place la pagination.
Les données retournées sont de la forme :

Code :

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

1
2
3
4
5
6
Object { 
​count: 2530
​next: "http://localhost:8000/archives/api/archive/?page=2"
​previous: null
​results: Array(50) [ 0: Object { id: 2727, service_id: 1, nomService: "Service ...", … }]
}

Par conséquent, j'en ai déduis ce modèle là :

Code :

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

1
2
3
4
5
6
7
8
export class Donnees {
  constructor (
    public count: number,
    public next: any,
    public previous: any,
    public results: Archive[]
  ) { }
}

​​
j'ai créé le service suivant :

Code :

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

1
2
3
    getDonnees(APIUrl: string): Observable<Donnees> {
      return this.http.get<Donnees>(APIUrl)
    }

Dans le composant.ts, j'utilise la fonction ci-dessous :

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
 
  getDonnees(url: string) {
    this.archivesService.getDonnees(url)
      .subscribe(response => {
        this.archives = response.results;
 
        if (response.next) {
          this.next = response.next;
        }
 
        if (response.previous) {
          this.previous = response.previous;
        }
    });
  }

Enfin, dans le componant.html, j'affiche les données avec :

Code html :

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

1
2
            <tbody>
              <tr *ngFor="let archive of archives">

ça fonctionne. Les données s'affichent correctement mais j'obtiens le message suivant :

"Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed"

Mes recherches sur Internet ne m'ont pas permis de trouver la solution.
Il semblerait qu'il faille utiliser "map".
Pouvez-vous m'aider ? Merci.

Patrice

[krakatoa]

peut tu mettre le resultat de :

Code :

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

1
2
 
{{archives | json }}

à savoir que le back ne doit retourner que du json (objet convertie en json)

par exemple, du json est sous la forme :

Code :

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

1
2
3
4
5
6
7
8
 
{
   results: [ 
       {name: 'toto'},
       {name: 'tutu'},
   ],
   date: '2022-04-12'
}

[Patrice.Newbie]

Le résultat de {{ archives | json }} est :

Code :

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

1
2
3
4
5
6
[ 
	{ "id": 2727, "service_id": 1, "nomService": "Services Techniques", "abbService": "ST", "reference_id": 10… }, 
	{ "id": 2726, "service_id": 2, "nomService": "Ressources Humaines", "abbService": "RH", "reference_id": 99, "nomReference": "----------", …. },
	{ "id": 2725, "service_id": 2, "nomService": "Ressources Humaines", "abbService": "RH", "reference_id": 99, "nomReference": "----------", …. },
….
]

[krakatoa]

ajoute : --> (response: any)
comme ici :

Code :

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

1
2
3
4
5
 
  getDonnees(url: string) {
    this.archivesService.getDonnees(url)
      .subscribe((response: any) => {
        this.archives = response.

[Patrice.Newbie]

J'ai solutionné le problème.
Mon code est juste.
J'ai mal lu le message d'erreur qui faisait référence à une ancienne fonction.
Un oubli de suppression.
Une erreur bête qui m'a fait perdre beaucoup de temps !
Désolé, merci d'avoir pris le temps de lire mon post.
Bonne journée.

[dukoid]

ok no pb.
ça m'est arrivé plusieurs fois aussi