Afficher une donnée json api dans html via wrapper

**Warren37** · 11/06/2022, 11h21

Bonjour,

J'utilise un wrapper pour récupérer d'une api un json qui s'affiche bien dans ma console avec la commande node nomdufichier.js

J'arrive à isoler juste la donnée à afficher en console

Que dois je faire concrètement pour afficher cette donnée dans une page html?

Dans HTML j'ai essayé cela:

Code :

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

1
2
<body><script src="test.js"></script>
<div> La somme = <span id="sum"></span><div><body>

Dans le fichier js, cela dans ma fonction:

Code :

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

1
2
var somme= contenuàafficher
document.getElementById("sum").innerHTML=somme;

Mai j'ai l'erreur ReferenceError: document is not defined

Merci d'avance

**Warren37** · 12/06/2022, 08h44

Erreur de recopiage dans html </div></body> et <script></script> en dessous
Mais si ça ne marche pas ça vient peut être que sur l'api c'est noté:

vous aurez besoin d'un serveur Web pour récupérer les données de l'API et héberger votre application. L'API applique ces restrictions et le dépassement des limites entraînera l'échec des appels d'API.

**mathieu** · 12/06/2022, 13h23

à l'endroit où vous avez marquez "var somme=...", c'est là que vous arrivez à afficher dans la console la valeur recherchée ?

**Warren37** · 13/06/2022, 09h20

Comme cela:

Code :

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

1
2
3
4
5
6
7
8
9
10
api.getInfo("#9JV9GGC0")
.then((info) => {      
  console.log(info)
  var somme=info
 document.getElementById("sum").innerHTML=somme;
return somme
})
.catch((err) => {
  console.log(err)
})

**mathieu** · 13/06/2022, 09h30

j'ai l'impression que vous mélangez le code coté client (le javascript traditionnel) et le code coté serveur (nodejs).
qu'est ce que vous avez actuellement comme code nodejs qui génère du code html ?

**Warren37** · 13/06/2022, 09h41

Cela:

https://devstory.net/11931/tutoriel-...-pour-debutant

J'ai un site html bootstrap que je veux mettre à la place du homePage.ejs avec les données que je reçois de l'api

**Warren37** · 13/06/2022, 10h02

J'ai essayé aussi de récupérer les données avec ça généré par postman:

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
var settings = {
              "url": "LienApiIci",
              "method": "GET",
              "timeout": 0,
              "headers": {
                "Authorization": "Bearer TokenIci"
              },
            };
 
            (function () {
              $.ajax(settings).done(function (response) {
                $('#monitor_data').append(JSON.stringify(response));
                console.log(response);
              });
            });

**mathieu** · 13/06/2022, 11h28

pour l'afficher avec nodejs, vous n'avez pas besoin de javascript côté client.

dans le fichier ejs, vous faites par exemple cela :

Code :

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

1
2
3
4
5
<body>
	<div>
		La somme = <%= valeur_somme %>
	</div>
<body>

et ensuite dans le code qui génère la page, vous faites cela :

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
app.get("/", function (request, response) {
 
 
	api
	.getInfo("#9JV9GGC0")
	.then((info) => {
 
		console.log(info)
 
		response.render("homePage", {"valeur_somme" : info});
 
	}).catch((err) => {
		console.log(err)
	});
 
 
});

**Warren37** · 13/06/2022, 11h47

Dans mon fichier ejs "<" est en rouge pourtant ça l'air correct.

La somme = <%= valeur_somme %>

J'ai le message valeur_somme is not defined

**Warren37** · 14/06/2022, 06h22

fait en php avec xampp finalement

Afficher une donnée json api dans html via wrapper

NodeJS

Discussions similaires

Partager

Partager