Discussion :

[masterdash]

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 :



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 :

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

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

[gwyohm]

salut,

tu récupères

Code :

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

this.listesdesAdherent = response.data

puis tu log

Code :

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

console.log(response.results[0])

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

Code :

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

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

[masterdash]

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:

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

[masterdash]

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

Code :

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

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 :


Merci pour votre aide.

[gwyohm]

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

[masterdash]

seState dans le log ou quoi?

[gwyohm]

mets le code complet de ton composant.

[masterdash]

Salut, voici un exemple avec ce code normale:

Code :

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

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



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

[masterdash]

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 :

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
{
  "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"
    }]

[gwyohm]

OK,

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

Néanmoins,

Code :

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

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 :

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

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...');
});

[masterdash]

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