Faire une requête fetch sur une API REST json

Version imprimable

1 pièce(s) jointe(s)

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:

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:

Pièce jointe 631609

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

Merci d'avance

Bonjour à tous,

Problème résolu avec ce code:

Code:

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

30/12/2022, 11h02
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
30/12/2022, 15h10
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.