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