Implementer fichier JSON dans mon fichier JS

21 mai 2019 à 11:29:14

Bonjour bonjour !

Comme enonce precedement, je cherche a implementer un fichier de data JSON dans mon fichier JS. J'ai esssaye avec un simple "require()" mais ma console me donne cette erreur : "ReferenceError: require is not defined".

En effectuant quelques recherches j'ai pu voir que la fonction "require()" ne peut etre lue par le nagivateur (je crois ne pas me tromper :euh: ). Je me demandaitdonc si quelqu'un pouvait m'eguiller vers une solution !

J'utilise D3.js dans mon code JS.

Bien des salutations,

Anna :ange:

piero5673

21 mai 2019 à 12:40:12

Bonjour,

Tu peux utiliser une balise script, ou tu peux ouvrir ton fichier json et faire un gros copier-coller dans ton fichier js. A toi de voir.

Acherontia atropos

21 mai 2019 à 13:12:30

Une balise script dans mon fichier HTML ?

<script>
      var json = require("./data1.json");
      console.log(json);
</script>

Si je le mets dans mon fichier HTML comment est ce que je peux recuperer ma variable dans mon fichier JS ?

Je ne peux pas faire de copier coller car je vais travailelr a terme avec des Big Data

piero5673

21 mai 2019 à 14:00:12

Tu peux mettre un attribut src à la balise script pour charger un fichier js. Je suis sur que tu as déjà du l'utiliser comme ça.

Ceci dit, si tu compte faire une api, je te conseille d'aller voir du côté de fetch (ça demanderas une petite implémentation niveau serveur) : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch et si tu veux un meilleur support, regarde du côté d'ajax : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX

Acherontia atropos

21 mai 2019 à 17:13:28

J'ai mis le code suivant dans mon ficher HTML mais je pense qu'il me faut quelque chose pour renvoyer ma variable au fichier JS non ? Pour l'instant quand je fais juste ca, la console JS me renvoit une erreur de type "ReferenceError: json is not defined"...

<script type="text/javascript" src="index.js">
      var json = require('./data1.json');
</script>

Je ne souhaite pas faire une api mais c'est gentil d'avoir propose !

piero5673

21 mai 2019 à 18:04:19

Alors petite mise au point avec require : ça n'existe pas dans un navigateur. J'imagine que tu as déjà utilisé des librairies ? tu fais pareil sauf que tu met la source de ton json : <script src="monJson.js"></script> avec ton json qui ressemble à ça :

const data = [ ... ]

comme ça tu déclare ce que l'on appelle une variable globale, tu y auras accès partout dans ta page.

Si tu veux charger le fichier dynamiquement, il te faut une api (api = serveur qui envoie des données) et tu récupère ton json via une des méthodes au dessus.

Acherontia atropos

21 mai 2019 à 18:19:47

Je dois donc creer un nouveau fichier JS avec l'importation de mes donnes a l'interieur ?

Voici mon fichier HTML :

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Figure 4.8</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

    <!-- Fichier contenant mes données -->
    <script type="module" src="mesData.js"></script>

    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>

  <body>
    <svg></svg>

    <!-- Fichier utilisant mes données -->
    <script type="text/javascript" src="index.js">
    </script>
  </body>

</html>

Et mon fichier mesDatas.js :

import * as data from "C:/Users/c1972519/Desktop/Stage (1)/tests_diagrams/figure_4.8_ex3/data1.json";
const json = data;

De la il doit me manquer quelque chose pour pouvoir utiliser ma variable "json" dans mon fichier index.js o_O

piero5673

22 mai 2019 à 12:39:57

Tu mélange tout. Tu veux coder en ES6 (c'est pas hyper bien supporté sur mobile et les vieilles versions de navigateurs) ? C'est normal les 3 versions de d3.js ?

Acherontia atropos

23 mai 2019 à 10:57:01

Desolee, je suis toute nouvelle dans le milieu et j'apprends seule, je fais encore beaucoup d'erreurs et c'est normal

Je ne savais meme pas qu'on pouvait coder en ES6, je ne savais meme pas que ca existait. Qu'est ce qui fait que je code en ES6 ? Qu'est ce que je devrais utiliser a la place selon vous ?

piero5673

23 mai 2019 à 12:06:41

Oublie tout ce qui est require et import, on vas dire que ça n'existe pas dans un navigateur. Par contre, tu as un objet window (spécifique au navigateur) qui est disponible partout. Dans un post précédent je t'avais dit de mettre un const data, si tu met window.data tu pourras utiliser data (juste data, sans import, sans require, juste avec window.data si tu veux absolument mettre quelque chose en plus).

Attention à ne pas mettre n'importe quoi dans cet objet, tu peux réécrire des données ou des méthodes déjà existantes. Tu trouveras les propriétés de bases ici

Petite note sur les variables en javascript : on peut les trier en deux types, les variables qui ne sont pas des références, et les variables qui sont des références. Tout ce qui est objet ou tableau est une référence vers le tableau ou l'objet (A noter qu'en js, les fonction et les classes sont des objets). Donc une fois que tu as déclaré window.data, si tu le modifie ça vas modifier toutes les références à cet objet :

window.data = {
 a: 1,
 b: 2
}

const b = data;

data.a = 3;

console.log(b.a);
//output: 3
//b est modifié alors qu'on ne l'as pas touché

Tu peux utiliser la méthode assign d'Objet ( https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign ) pour cloner l'objet :

window.data = {
 a: 1,
 b: 2
}

//le premier paramètre est l'objet qui seras modifié
const b = Object.assign({}, data);

data.a = 3;

console.log(b.a);
//output: 2
//b n'est pas modifié

ES6 ça veut dire ecmascript 6, c'est un ensemble de normes pour le javascript. Pas besoin de t'en occuper pour le moment, en général on compile l'es6 pour qu'il soit compatible avec tous les navigateurs.