API JSON TO HTML ReferenceError: $ is not defined

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

Bonjour, J'essaye d'afficher une réponse json d'une api dans une page html mais j'ai l'erreur ReferenceError: $ is not defined.
J'ai testé et récupéré une partie de l'ajax sous Postman pour mon code js. En local via un wrapper je peux lire le json dans la console. Je suis sous Visual Studio Code.
Si vous avez un conseil je suis preneur. Merci d'avance

.

PAGE HTML

Code html :

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

1
2
3
4
5
<body>
<div id="monitor_data"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js?ver=18"></script>
</body>

PAGE JAVASCRIPT

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

**SpaceFrog** · 09/06/2022, 08h59

Jquery non chargé ...
Essaye en remontant tes scripts dans le head

Code html :

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

1
2
3
4
5
6
7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js?ver=18"></script>
</head>
<body>
<div id="monitor_data"></div>
 
</body>

**Warren37** · 09/06/2022, 09h27

Non cela ne change rien.
Mon erreur ne vient pas du module node?

Nom : erreur.jpg
Affichages : 157
Taille : 102,6 Ko

**SpaceFrog** · 09/06/2022, 09h32

Commence par regarder en console dans l'onglet réseau si ton jquery est bien chargé

**Warren37** · 09/06/2022, 12h00

Dans réseau, jquery est bien chargé.

**SpaceFrog** · 09/06/2022, 12h06

Alors cela veut dire que le script js est interpété trop tôt (avant le chargement de la page)...
Tu as mis ton script dans un ready ?

**Warren37** · 09/06/2022, 12h19

Mon script javascript contient un ready publié en haut de la discussion. Je souhaitais le recevoir grâce à "monitor_data" dans mon html. Je n'ai rien rajouté.

**ASCIIDEFOND** · 09/06/2022, 12h46

Bonjour à tous,

Et sans utiliser "test.js".

Code HTML :

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
<body>
  <div id="monitor_data"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- <script src="test.js?ver=18"></script> -->
 
  <script>
 
    var settings = {
      "url": "MonURLAPIici",
      "method": "GET",
      "timeout": 0,
      "headers": {
        "Authorization": "Bearer MonTokenIci"
      },
    };
 
    $(function () {
      $.ajax(settings).done(function (response) {
        $('#monitor_data').append(JSON.stringify(response));
        console.log(response);
      });
    });
  </script>
 
</body>

**SpaceFrog** · 09/06/2022, 12h50

Mon script javascript contient un ready publié en haut de la discussion.

Je ne vois pas de ready dans le code que tu as posté ...

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

ASCCIdefond ton code ne m'affiche rien en html et a toujours la même erreur au debug.

Spacefrog tu parles d'encadrer avec

Code :

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

1
2
 $(document).ready(function() {
});

?

**ASCIIDEFOND** · 09/06/2022, 13h44

Envoyé par Warren37

ASCCIdefond ton code ne m'affiche rien en html et a toujours la même erreur au debug.
?

Soit JQuery n'est pas accessible ou alors il-y a un souci avec Node.

**ASCIIDEFOND** · 09/06/2022, 14h06

Des précisions pour l’utilisation de JQuery avec Node.

https://www.geeksforgeeks.org/how-to...-with-node-js/
https://www.npmjs.com/package/jquery

**SpaceFrog** · 09/06/2022, 14h36

Oui
ou de

Code :

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

1
2
3
$(function() {
.../...
});

**Warren37** · 10/06/2022, 16h20

J'ai refait mon projet Express.js
PS: J'avais tester avec tes infos ASCIIdefond

Note: Using the "preview" debug extension
C:\Program Files\nodejs\node.exe .\bin\www

Programme www lancé dans la pile des appels.

Malheureusement je ne reçois pas mon appel get api dans le html.

Faut il faire autre chose que:

https://code.visualstudio.com/docs/n...odejs-tutorial

Dans la console de Firefox j'ai ceci:

Nom : erreur4.jpg
Affichages : 109
Taille : 191,9 Ko

Nom : erreur4.jpg
Affichages : 109
Taille : 191,9 Ko

ou une autre impression un peu différente:

Nom : erreur5.jpg
Affichages : 118
Taille : 212,2 Ko

Merci d'avance

**ASCIIDEFOND** · 11/06/2022, 00h20

Bonsoir à tous,

Le souci vient apparemment de Node.
Désolé, mais je ne vois pas de solution à part désinstaller Node, nettoyer le disque et le réinstaller dans sa dernière version. Ou sinon coder sans JQuery.
Peut-être des pistes dans le sous forum NodeJS.

**Warren37** · 14/06/2022, 07h23

Faut en php avec xampp finalement

API JSON TO HTML ReferenceError: $ is not defined

NodeJS

Discussions similaires

Partager

Partager