Importer des données en JavaScript

Bonjour,
J'ai un script d'affichage de calendrier qui fonctionne:

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

const en = { weekDays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] ,monthes: ['January','February','March','April','May','June','July','August','September','October','November','December'] ,week: 'Week' } ,fr = { weekDays: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'] ,monthes: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] ,week: 'Semaine' } ,de = { weekDays: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'] ,monthes: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'] ,week: 'KW' } ,es = { weekDays: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'] ,monthes: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'] ,week: 'Semana' } ,it = { weekDays: ['Domenica','Lunedì','Martedì','Mercoledì','Giovedì','Venerdì','Sabato'] ,monthes: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'] ,week: 'Settimana' } ;   // NE PAS OUBLIER D AJOUTER LES NOUVELLES LANGUES ICI const data = {en, fr, de, es, it};   // LA CONSTANTE lang DOIT ËTRE FOURNIE A PARTIR DE PHP. const params = data[lang];   // ... suite du code

---

Pour plus de souplesse et éviter d'avoir à modifier le code, je voudrais externaliser les textes.
Après avoir cherché, j'ai testé ceci qui ne fonctionne pas:

Code:

---

1 2 3

console.log(lang); // défini en php const params = require('lang/'+lang+'.json'); console.log(params:"week");

---

Contenu d'un fichier de langue:

Code:

---

1 2 3 4 5

{ "weekDays": ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"] ,"monthes": ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"] ,"week": "Semaine" }

---

Une des questions que je me pose est de savoir comment préciser le chemin du fichier. Sinon, je ne vois pas ce qui ne fonctionne pas. Par ailleurs la console de Edge me renvoie plein de problèmes qui ne m'intéressent pas dans l'immédiat sur l'en-tête mais n'affiche pas ce que je lui demande.

Salut
const params = require('lang/'+lang+'.json'); ton code
const params = require('./lang/'+lang+'.json'); peut être

J'ai avancé: La fonction require() n'est pas reconnue par JS. Après avoir poursuivi mes recherches, je pense qu'il faut utiliser import(). J'ai trouvé ceci ici:
import params from 'fr.json' assert { type: 'json' };alert(params); qui provoque une erreur:

Citation:

---

Unexpected identifier 'assert'

---

En me reportant à la documentation MDN, j'ai essayé plusieurs alternatives avec import() dont const params = import('fr.json'); qui provoque l'erreur suivante:

Citation:

---

clock.js:51 Promise*{<rejected>: TypeError: Failed to resolve module specifier 'fr.json'
at http://bibli.local//js/clock.js:50:16}[[Prototype]]: Promise[[PromiseState]]: "rejected"[[PromiseResult]]: TypeError: Failed to resolve module specifier 'fr.json'
at http://bibli.local//js/clock.js:50:16
clock.js:50 Uncaught (in promise) TypeError: Failed to resolve module specifier 'fr.json'
at clock.js:50:16
(anonymes) @ clock.js:50

---

Dans ce message la position 50:16 correspond au mot clef import et je ne sais pas interpréter ce message.
Pour mes essais, j'ai placé mes fichiers de langue .json dans le répertoire root/js/ avec mon script.

Complément au message précédent:
J'ai modifié le nom du fichier à importer comme ceci: import('./fr.json').
Conséquences:
L'erreur précédente a disparu.
Une nouvelle erreur apparaît:

Citation:

---

clock.js:51 Promise*{<pending>}
fr.json:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.
bibli.local/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://bibli.local//js/fr.json

---

Je comprends cette erreur mais comment la résoudre?

Bonjour à tous,
Je pense que mon message précédent est mal posé et mal conçu.
Comme j'en ai assez de patauger, je repose donc ma question différemment:
Quelle est la meilleure méthode pour importer un fichier langue .js ou .json dans un script fichier.js?

Bonjour,

Le plus simple pour charger un fichier json dans un environnement web est de passer par l'API Fetch.

Sinon, pour contourner ton erreur, tu peux importer un fichier js qui exporte le contenu json.

index.html :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body>   <script src="index.js" type="module"></script> </body> </html>

---

index.js :

Code:

---

1 2	import data from './data.js'; console.log(data);

---

data.js :

Code:

---

1 2 3 4 5 6

export default { "id": 1, "name": "John Doe", "age": 12 }

---

Tu peux regarder ce guide qui propose une solution possible sans bibliothèque pour la traduction en javascript et d'autres solutions avec des bibliothèques js : https://phrase.com/blog/posts/step-s...-localization/

J'ai testé ton exemple. Il fonctionne avec un nom de fichier écrit en dur ".js/fr.js". Il ne fonctionne plus si le nom du fichier est une variable.
J'ai essayé comme ceci:

Code:

---

1 2 3 4 5 6

console.log(lang); const filename = './'+lang+'.js'; console.log(filename); const params = import(filename); console.log(params); // Promise console.log(params.weekDays); // undefined

---

Ce code provoque une erreur à la lecture de 'params'. Après des recherches sur MDN, je reste complètement noyé.

« Ce code provoque une erreur à la lecture de 'params'
console.log(params.weekDays); // undefined »

undefined n'est pas à proprement parler une erreur.

Console.dir(params) , qu'est-ce que ça donne ?

@domi65: Je n'ai pas essayé parce que console.log(params) me renvoie un objet promise et impose de travailler en asynchrone. J'y reviendrai peut-être après si nécessaire.

Par ailleurs, j'ai trouvé une solution sur un autre forum en modifiant le html comme ceci:

Code:

---

1 2 3

<script>const lang = "fr";</script> <script src='js/lang/fr.js'></script> <script type='module' src='js/clock.js'></script>

---

ce qui me permet d'utiliser directement la constante lang et mon fichier langue dans 'clock.js'. La question qui se pose maintenant est: Est-ce qu'il y a un risque à fonctionner ainsi?

@pytet: Je dois encore approfondir le lien que tu m'as donné.

Il ne semble pas y avoir plus de risques avec ta dernière solution (les fichiers de traductions sont publiques et sans données confidentielles je suppose).

Tu peux récupérer les données via la propriété default de la promesse retournée par import() si le fichier fr.json contient uniquement un export default.

lang/en.js :

Code:

---

1 2 3 4 5 6

export default { weekDays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], monthes: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], week: 'Week' }

---

lang/fr.js

Code:

---

1 2 3 4 5 6

export default { weekDays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], monthes: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], week: 'Semaine' }

---

index.js :

Code:

---

1 2 3 4 5 6

let lang = 'en';   let module = await import('./lang/' + lang + '.js'); let translations = module.default;   console.log(translations);

---

Merci!