Vuejs et API Rest comment afficher le résultat sur une table ou autre.

Bonjour tout le mode, j'ai un problème avec une API Rest que je dois afficher sur une Data-Table ou autre la structure de l'API dans l'image suivante :

Pièce jointe 562505

Et voici un bout de code que j'ai écrit pour charger et afficher le résultat de cette API, merci à tous les développeurs.

Code:

---

1 2 3

axios.get('/TServerMethods1/Employees').then(response => { this.listesdesAdherent = response.data console.log(response.results[0])

---

salut,

tu récupères

Code:

---

this.listesdesAdherent = response.data

---

puis tu log

Code:

---

console.log(response.results[0])

---

dans ta capture, on voir employees qui est un tableau. ce ne serait pas plutôt ?

Code:

---

1 2	const { data: { employees = [] } = {} } = response; this.listesdesAdherent = employees;

---

Salut et merci pour votre réponse, je viens de mettre const { data: { employees = [] } = {} } = response, après la déclaration de axios et this.listesdesAdherent = employees après la réponse de axios.get mais j'ai cette erreur:

Citation:

---

63:43 error 'response' is not defined no-undef

---

Voila je corrige mon dernier poste, et ce que fait et:

Code:

---

1 2 3 4

axios.get('/TServerMethods1/Employees').then(response => { const { data: { employees = [] } = {} } = response this.listesdesAdherent = employees console.log(employees)

---

mais ça n'a pas donnée de resultat attendu, je n'arrive toujours pas afficher mes données sur la template ou Data-Table

voici l'erreur :
Pièce jointe 562548

Merci pour votre aide. :mur:

ce n'est pas une erreur, c'est le log...
mais mettre ton résultat dans une variable comme ca c'est louche... tu mets ton composant en entier ?
Tu devrais avoir un seState plutôt...

seState dans le log ou quoi?

mets le code complet de ton composant.

Salut, voici un exemple avec ce code normale:

Code:

---

1 2 3 4 5 6 7

axios.get('/TServerMethods1/Employees').then(response => { // const { data: { employees = [] } = {} } = response this.listesdesAdherent.employees = response.data console.log(response.data) }, response => { console.log(response)

---

et le LOG en sortie

Pièce jointe 562564

maintenant comment mettre ce résultat dans la grille, cette méthode marche nickel avec les exemples de JSONPlaceHolder /posts mais pas avec le mien le problème réside dans {
"emloyees": [
{
à cause ce dernier que je n'arrive pas à mettre les données dans la grille :ptdr:

Je n'arrive pas à résoudre mon problème avec ce type de JSON, j'ai pris une API de JSONPlaceHolder "/posts" que j'ai essayé sur mon programme elle marche bien

https://jsonplaceholder.typicode.com/posts

mais avec la mienne dont je suis obligé de travailler avec, ne marche pas : la différence entre eux c'est ce qui ai en rouge

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

{ "emloyees": [ { "avis_ID": 27, "journee": "05/08/2018", "num_Emp": "666666666", "raisoc": "TTTTTTTTTT", "d_Paiement": "05/08/2018", "n_Cheque": "11111111", "banque": "CCCC", "codBanq": "005", "canal": "2", "agent": "AAAA", "emp": "6666666", "cle": "2", "nom_PC": "-PC", "iP_PC": "", "IB": false, "total": "46200,00" }]

---

OK,

Donc encore une fois si on voyait le composant en entier ca aiderait à t'aider...

Néanmoins,

Citation:

---

Code:

---

1 2 3 4 5 6 7

axios.get('/TServerMethods1/Employees').then(response => { // const { data: { employees = [] } = {} } = response this.listesdesAdherent.employees = response.data console.log(response.data) }, response => { console.log(response)

---

---

tu mélanges le format de ta réponse et le format que tu veux obtenir dans ton composant.
essaye de faire :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

axios.get('/TServerMethods1/Employees').then(response => { // on recupère dans une variable employees la valeur de la clé employees contenue dans la réponse de la requête axios // on lui donne en valeur par défaut un tableau vide const { data: { employees = [] } = {} } = response // on affecte cette valeur au membre this.listesdesAdherent this.listesdesAdherent = employees; console.log(this.listesdesAdherent) }, error => { console.log(error) }).then(() => { console.log('tout s'est bien passé, on a bien récupéré des données. si l'affichage ne se passe pas bien, c'est qu'il y a un problème plus loin...'); });

---

Salut, j'ai essayé la solution que m'avais proposé mais mal heureusement je suis incapable de la faire fonctionner correctement.
Je suis coincé.:weird: