Discussion :

[zoumzoum59]

Bonjour a tous,

J'ai un soucis qui doit être du au temps d'acquisition de mes données sur serveur d'une commande fetch sur un JSON provenant d'une API REST et de l'affichage dans un graphe avec Graph.js, si j'analyse bien ce qui se passe, mon graphe doit apparaitre a l’écran avant de recevoir mes données issue du serveur.
Car dans la console, mon tableau apparait avant les données, alors que dans le code c'est l'inverse
Avec le tableau "dat" dans le code aucun soucis mon graphe contient les données, par contre avec le tableau de mon JSON pas de données affiché dans le graphe

Voici mon code:

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
consttempExt1 =[]
vartempExt2 = []
vartempInt1 =[]
vartempCave1 =[]
vardateServer1 =[]
asyncfunctionjson24(){
//const container = document.getElementById("container")
 
constpromise = awaitfetch('http://localhost:8080/api/temps');
returnpromise;
 
 
 
 
 
/*var i=0
  var tempExte2=[]
  for(var res of tempExt1){
  tempExte2[i]=res
  i+=1
  }
  console.log(tempExte2)
  console.log(tempExt1)*/
 
 
//alert(tempExt1)
 
//console.log(tempExt1);
 
  }
 
 
 
 
document.addEventListener('DOMContentLoaded', function() {
 
constpromise = json24();
promise.then(response=>response.json())
//talert=commits[1].tempCave);
  .then(commits=> {                                        
vari=0
for (letrofcommits){
tempExt1[i]=r.tempExt;
tempInt1[i]=r.tempCave;
tempCave1[i]=r.dateServer;
dateServer1[i]=r.tempInt;
i+=1
    }
i=0
vartempExt2=[]
for(letresoftempExt1){
console.log(res);
tempExt2[i]=res
i+=1
    }
  });
 
//alert(typeof json24())
//console.log(typeof(tempExt1));
 
//console.log(json24())
vardat=[12, 19, 3, 5, 2, 3,45,8,1,22,10.5,12,12,13,15,4,12,10,9,7,12,14]
console.log(typeof(dat));
console.log(typeof(tempExt1));
varctx = document.getElementById('myChart');
console.log(tempExt1);
console.log(tempExt2);
newChart(ctx, {
type:'line',
data: {
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
datasets: [{
label:'Tempetrature des dernière 24 heures',
data:tempExt2,
borderWidth:1
      }]
    },
options: {
responsive:true,
scales: {
y: {
suggestedMin:20,
beginAtZero:true
        }
      }
    }
  });
});

Et voici le retour de la console:



Si vous avez besoin d'autres infos n’hésitez pas.

Merci d'avance

[zoumzoum59]

Bonjour à tous,

Problème résolu avec ce code:

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const tempExt1 =[]
var tempExt2 = []
var tempInt1 =[]
var tempCave1 =[]
var dateServer1 =[]
 
document.addEventListener('DOMContentLoaded', function() {
json24();
async function json24(){
 
     const response = await fetch('http://localhost:8080/api/temps');
 
    data = await response.json();
 
      var i=0;
      for (let r of data){
        tempExt1[i]=r.tempExt;
        tempInt1[i]=r.tempCave;
        tempCave1[i]=r.dateServer;
        dateServer1[i]=r.tempInt;
        i+=1
      }
 
          var ctx = document.getElementById('myChart').getContext('2d');
 
          new Chart(ctx, {
            type: 'line',
            data: {
              labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
              datasets: [{
                label: 'Tempetrature des dernière 24 heures',
                data: tempExt1,
                borderWidth: 1
              }]
            },
            options: {
              responsive: true,
              scales: {
                y: {
                  suggestedMin: 20,
                  beginAtZero: true
                }
              }
            }
          });
         };
  });

Je ne sais pas pourquoi exactement là ça fonctionne, donc si quelqu'un peu m'expliquer ça serait nickel.

Merci

[mathieu]

dans votre 1er message, vous avez mélangé l'utilisation de "await" et des promesses. regardez là pour 2 exemples de codes qui font la même chose :
https://www.developpez.net/forums/d2.../#post11899853

[zoumzoum59]

Merci mathieu,

Ok j'ai du merder a un moment ou a un autre, car au départ, j’étais partit avec la méthode des promesses, mais je n'ai pas réussi à le faire fonctionner.
Et c'est après que j'ai essayé avec "async" et "await", mais comme tu l'a dit j'ai mélangé les deux.
Ok c'est plus clair pour moi entre les deux méthodes.

Merci pour les infos.