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!