Discussion :

[Beginner.]

Salut,

Je me pose une question : peut-on transformer manuellement du JSON en objet JS ?
Je suppose (je n'ai pas encore �tudi� �a) qu'en g�n�ral on charge le fichier .JSON (avec AJAX ???) et ensuite on le parse, c'est �a ?

Bon pour l'instant j'ai voulu le faire manuellement, je m'explique :

- Je lis le fichier .JSON dans �diteur.
- J'ajoute devant la premi�re accolade ceci "var obj ="
- Ensuite j'enregistre le fichier avec une extension .js et j'utilise alors ce fichier avec une balise <script>.

Apparemment �a fonctionne mais j'aimerais avoir une confirmation, peut-il y avoir des probl�mes dans certains cas ?

Merci.

[danielhagnoul]

Si votre JSON est un texte comme il se doit (sinon c'est d�j� un objet JS), il faut �crire let ObjJS = JSON.parse(strJSON);.

[Beginner.]

Merci.

Oui justement �a c'est la m�thode g�n�ral que j'avais mentionn�e mais moi je voulais savoir ce qu'il en est de le faire "manuellement" comme expliqu� dans mon message.

PS : comment j�obtiens "strJSON" � partir du fichier .JSON ? On utilise une requ�te AJAX ?

[danielhagnoul]

Je ne comprends pas ce que vous ne comprenez pas ou pire je ne comprends pas la question !

� toutes fins utiles :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
const objJS = {
    titre: 'mon titre'
};
 
const strJSON = JSON.stringify(objJS);
 
const autreObjJS = JSON.parse(strJSON);
 
console.log(objJS); // {titre: "mon titre"}
console.log(strJSON); // '{"titre":"mon titre"}'
console.log(autreObjJS.titre); // mon titre

[Beginner.]

Salut,

J'ai bien compris le code que tu viens de poster mais effectivement cela ne r�pond pas � mes questions...

Moi au d�part j'ai un fichier avec l'extension .JSON et non une string...

---> Mais ton code m'inspire une nouvelle fa�on de faire la transformation dont je parle manuellement :

- Je lis le fichier .JSON dans �diteur.
- J'ajoute des guillemets : une devant la premi�re accolade et une autre apr�s la derni�re accolade.
- J'ajoute devant la premi�re guillemet ceci "var strJSON ="
- J'enregistre le fichier avec une extension .js
- J'utilise alors JSON.parse(strJSON) pour convertir la string en objet JS.

Mais cela me semble un peu plus lourd que la premi�re m�thode mais bon pourquoi pas.

[psychadelic]

si j'ai bien compris ta mani�re tarabiscot�e de poser question,
tu cherches tout simplement � remplir une variable json par des donn�es pr�sentes dans un fichier JSON (qui est en r�alit� un fichier texte, donc un string)

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
      fetch("fichierXY.JSON")
      .then(function(response) { return response.json(); })
      .then(function(r_json) {
        objJSON = r_json;
      });

sinon attention, ce code est bien sur forc�ment asynchrone

[Invit�]

Bonjour,

Je ne comprendspas pourquoi tu insistes sur le mot "manuellement"...

...Moi au d�part j'ai un fichier avec l'extension .JSON ...

Ce que je crois avoir compris :

• Manipuler des donn�es JSON - Chargeons notre JSON

• Charger un fichier JSON avec AJAX
• jQuery : apprendre le chargement d'un fichier JSON avec AJAX

[Beginner.]

Merci et je vous mets � tous les trois un +1 pour vos efforts m�me si vous n'avez pas compris ma question pourtant toute simple, plus que vous ne semblez le croire...

si j'ai bien compris ta mani�re tarabiscot�e de poser question

Mais peut-�tre que c'est justement parce que tu n'as pas compris ma question que tu trouves ma mani�re de la poser "tarabiscot�e" ??? Pourtant j'ai beau la relire je la trouve claire et d�taill�e...

Mais bon je vais essayer de la r�expliquer plus tard...
Mais si avant cela quelqu'un parvient � la comprendre je le f�licite d'avance !

tu cherches tout simplement � remplir une variable json par des donn�es pr�sentes dans un fichier JSON (qui est en r�alit� un fichier texte, donc un string)

Merci. J'ai bien test� ton code rassure toi et j'ai fait des recherches pour comprendre, c'�tait instructif merci mais je dois quand m�me vous faire comprendre que justement je ne demandais pas une m�thode ou un moyen pour faire cela, je sais bien qu'il y en a plusieurs et la plupart pour ne pas dire toutes utilise probablement � un moment donn� une requ�te pour charger le fichier.

Non en fait j'ai d�j� expos� une m�thode et je voulais savoir ce que vous en pensiez, j'ai dit "Apparemment �a fonctionne mais j'aimerais avoir une confirmation, peut-il y avoir des probl�mes dans certains cas ?"...

Qu'est-ce qui n'est pas clair franchement ? Si c'est un point de l'expos� de la m�thode eh bien il aurait suffit de demander plus d'explications sur ce point...

Je ne comprendspas pourquoi tu insistes sur le mot "manuellement"... :koi:

Ben au vu des r�ponses je me demande si je n'aurais pas d� insister plus. Je sais bien comme d�j� dit qu'il existe plusieurs m�thodes pour faire ce que je veux faire et la plupart pour ne pas dire toutes utilisent probablement � un moment donn� une requ�te pour charger le fichier.

"manuellement" c'est juste une fa�on de qualifier la m�thode que j'ai expos�e par opposition aux autres m�thodes... Oui car dans cette m�thode je n'utilise pas de code pour faire (automatiquement) la transformation fichier .JSON vers objet JS. Cette m�thode est tr�s simple* et donc �a m'arrangerait si elle �tait fiable d'o� la raison pour laquelle j'ai demand� votre avis.

* Elle est simple :

1- Dans le sens o� je n'ai pas � �tudier/utiliser certaines notions que je ne maitrise pas (encore). Je parle des notions que l'on voit dans les exemples et les liens que vous avez post�s.

2- Et aussi parce que je voulais �viter d'avoir � utiliser un serveur local. En effet sous Chrome pour tester le code de psychadelic il a fallu que je passe par un serveur local sinon il nous dit ceci :

Fetch API cannot load file:///D:/Developpement/.../bookmark.JSON. URL scheme must be "http" or "https" for CORS request.

J'ai regard� tes liens merci et notamment celui-l� Charger un fichier JSON avec AJAX qui cette fois-ci utilise l'objet XMLHttpRequest et Chrome me dit :

Failed to load file:///D:/Developpement/.../data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Mais en utilisant un serveur local �a marche (et je crois qu'on peut aussi d�sactiver les s�curit�s de Chrome je l'ai d�j� fais d'ailleurs pour autre chose mais bon...).

D'ailleurs dans le tuto l'auteur pr�cise lui-m�me ceci :

Nous allons maintenant r�aliser un syst�me de visualisation de ce catalogue dans un navigateur Firefox. Contrairement � IE ou Chrome, Firefox permet d'acc�der � des fichiers locaux en AJAX dans une page locale (file://). Ce code ne fonctionne donc pas dans un autre navigateur ou si on l'ex�cute via un serveur web (pour des raisons de s�curit� �videntes : un site ne peut pas acc�der au syst�me de fichiers local d'un utilisateur � sa guise !).

3- Et enfin parce qu'avec cette m�thode je n'ai pas � utiliser de m�thode asynchrone ainsi que la gestion qui va avec...

Voil�, je ne sais pas si c'est plus clair ???

[Invit�]

Compris

Le mot le plus important �tait donc bien "manuellement" !

Du coup, voici une m�thode empirique :

1. tu prends des fichiers json "test" (test.json), valides, mais de diff�rentes formes comme indiqu� ici : Structure du JSON et Des tableaux en tant que JSON
   (� priori, �a semble �tre les 2 seuls types de structures possibles : tu peux d'ailleurs tester sur ces 2 exemples !)
2. via la m�thode propos�e par "danielhagnoul", tu cr�es un fichier de test test.js, et tu obtiens la chaine json recherch�e strJSON
   

   Code JavaScript :

   S�lectionner tout - Visualiser dans une fen�tre � part

   1
   2
   3
   4
   5
   const objJS = ..........; // ICI, tu COPIES ne contenu du fichier json
   const strJSON = JSON.stringify(objJS); // Là, tu récupères la chaine résultante
   // affichage dans la console
   console.log(objJS);
   console.log(strJSON);

3. Tu as alors la certitude que strJSON est bien la "traduction" du fichier initial
4. enfin : tu COMPARES (dans la console) la structure de objJS avec la structure de strJSON.

Tu verras alors si TA m�thode manuelle (d�crite plus haut) convient ou pas.


J'ai bon ?

[Beginner.]

Ok merci, je vais essayer �a.

Pour l'instant la seul diff�rence que je vois c'est que je me retrouve avec les cl�s entre guillemets, par exemple ceci :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
var bookmark = {
    "guid": "root________",
    "title": "",
    "index": 0,
    "dateAdded": 1454705741093000,
    "lastModified": 1533233031120000
}

au lieu de ceci :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
var bookmark = {
    guid: "root________",
    title: "",
    index: 0,
    dateAdded: 1454705741093000,
    lastModified: 1533233031120000
}

Mais cela ne semble pas poser de probl�me.

Et bien s�r si vous avez bien compris la m�thode alors vous aurez compris qu'au d�part j'ai un fichier .json avec ce contenu :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
{
    "guid": "root________",
    "title": "",
    "index": 0,
    "dateAdded": 1454705741093000,
    "lastModified": 1533233031120000
}

La seule diff�rence c'est "var bookmark ="...

[Invit�]

Si on y r�fl�chit 2 secondes.... pas besoin de se prendre la t�te, ni te "traficoter" le code !!

tu n'as PRESQUE RIEN � faire "manuellement", � part, A CHAQUE FOIS :

• cr�er un fichier .js (� partir de ton fichier .json)
• dedans tu mets :
  

  Code :

  S�lectionner tout - Visualiser dans une fen�tre � part

  1
  2
  const objJS = ..........; // ICI, tu COPIES TOUT le contenu du fichier json TEL QUEL
  const strJSON = JSON.stringify(objJS);

Et voil�, le tour est jou� : tu l'as, ton fichier .js, avec ton objet JS !

Avec z�ro risque de te tromper ! (puisque stringify fait TOUT le travail)

[Beginner.]

Ah j'ai vu que tu as ajout� des pr�cisions � ton message

Tu verras alors si TA m�thode manuelle (d�crite plus haut) convient ou pas.

Attention le lien que tu as mis renvoi � la deuxi�me m�thode "manuelle" que m'a inspir�e le code de Daniel, elle est moins simple que la premi�re, celle pour laquelle j'ai ouvert ce fil (cf.lepremier message donc).

D'ailleurs il y a une erreur dans cette deuxi�me m�thode :

...
- Je lis le fichier .JSON dans �diteur.
- J'ajoute des guillemets : une devant la premi�re accolade et une autre apr�s la derni�re accolade.
- J'ajoute devant la premi�re guillemet ceci "var strJSON ="
...

Il ne faut pas ajouter des guillemets mais des apostrophes : '
Oui car les guillemets sont d�j� utilis�es � l'int�rieur...

[Beginner.]

Et ben voil�, tu viens de r�expliquer la m�thode (du premier message celle pour laquelle j'ai ouvert le fil) sauf pour ce qui est de r�cup�rer la chaine r�sultante car je l'ai d�j� en faite dans l'�diteur donc je n'ai plus qu'� enregistrer le fichier avec l'extension .js comme expliqu�.

La seule diff�rence que j'ai constat� pour l'instant c'est les cl�s qui sont entre guillemets (cf. mon message #10)

[Invit�]

LOL... je suis un dahu... (j'ai tourn� en rond, et suis revenu au point de d�part !)
(cela dit, je n'avais effectivement pas relu le 1er message, et m'�tais bas� sur la 2�me m�thode, effectivement beaucoup plus fastidieuse... et source d'erreurs)

Du coup (je vais essayer de me rattraper) : �a CONFIRME que c'est une bonne m�thode !

Mais inutile de comparer l'objet lui-m�me avec la chaine r�sultante du stringify() : c'est normal qu'ils soient diff�rents.



C'est la canicule ici.... J'ai besoin de me r�hydrater le cerveau.......

[Beginner.]

Oui c'est clair, c'est la canicule chez moi aussi...
Mais bon enfin on n'y est arriv�... (Bon apr�s coup, elle �tait simple la question, non ?)

N.B. En r�alit�, danielhagnoul avait TROIS trains d'avance sur nous...
Il doit d�j� �tre relax, les pieds dans l'eau...

Ben non justement, d�sol� de le dire... Relis bien le fil depuis le d�but et tu comprendras peut-�tre...
Sa premi�re r�ponse �tait :

Si votre JSON est un texte comme il se doit (sinon c'est d�j� un objet JS), il faut �crire let ObjJS = JSON.parse(strJSON);.

En toute sinc�rit� je ne vois pas en quoi �a r�pondait � ma question (qui concerne je le rappelle la fiabilit� de la m�thode expos�e).

En plus la m�thode qu'il propose est "incompl�te" (� ne pas prendre mal svp, je ne dis pas �a m�chamment) contrairement � celle de psychadelic, en ce sens qu'il ne nous indique pas d'o� vient ce fameux "strJSON" dans le code let ObjJS = JSON.parse(strJSON); ? Il ne nous explique pas comment on l'obtient � partir du fichier .json, il fallait deviner ?

Bon je sais, pour obtenir ce fameux "strJSON" � partir du fichier .json, j'ai eu par la suite l'id�e (cf.la m�thode 2) d'ajouter des apostrophes comme ceci : var strJSON = 'ici le texte contenu dans le fichier .json'. De toute fa�on cette deuxi�me m�thode "manuelle" est plus lourde que la premi�re... Mais sans cette id�e on pouvait l�gitiment penser qu'il faudrait utiliser une requ�te pour obtenir ce fameux strJSON or je voulais �viter cela justement pour les raisons d�j� expliqu�es...

Bref dans tous les cas �a ne r�pondait pas � ma question mais par contre cela m'a fait r�fl�chir alors je le remercie quand m�me et je lui ai m�me mis des +1.

[Invit�]

Ah ! je vois que toi aussi, tu p�dales dans la semoule !

RELIS (toi-aussi) ce que j'ai �cris :

1- Ca, c'est ce que tu as d�j� avec ta 1�re m�thode :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

const objJS = ..........; // ICI, tu COPIES TOUT le contenu du fichier json TEL QUEL

2- Ca, c'est ce qui permet de g�n�rer "automatiquement" strJSON (� l'int�rieur de ton fichier .js !) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

const strJSON = JSON.stringify(objJS);

Il n'y a pas besoin de manipulation manuelle quelconque : c'est stringify() qui fait le travail !


Ta m�thode devient :

1. J'ouvre le fichier .json dans �diteur.
2. J'ajoute AU DEBUT
   

   Code :

   S�lectionner tout - Visualiser dans une fen�tre � part

   var objJS =

3. J'ajoute A LA FIN
   

   Code :

   S�lectionner tout - Visualiser dans une fen�tre � part

   1
   2
   ; // un point-virgule, pour fermer objJS
   var strJSON = JSON.stringify(objJS);

4. Enfin j'enregistre le fichier avec une extension .js et j'utilise alors ce fichier avec une balise <script>.

objJS est DEJA un objet JavaScript, utilisable dans le reste du code.



N.B. Par contre, je ne sais pas si (ni quand*) il faut utiliser var, let ou const...
(* la nuance m'�chappe un peu)

[Beginner.]

Ah ! je vois que toi aussi, tu p�dales dans la semoule !

Ah ben peut-�tre ou bien je me suis mal fais comprendre ???

RELIS (toi-aussi) ce que j'ai �cris :

Alors ce que je comprends de la suite de ton message c'est que tu penses que je cherche � r�cup�rer ce fameux "strJSON", c'est �a ? Si oui eh bien non ce n'est pas le cas, je me suis mal fais comprendre apparemment : dans mon pr�c�dent message j'expliquais que l'origine (la mani�re de l'obtenir � partir du fichier .json) de ce fameux "strJSON" �tait manquante si on voulait utiliser le code de Daniel mais �a n'est pas une r�ponse � mon probl�me m�me si c'�tait int�ressant car cela nous a fait r�fl�chir et d'ailleurs toi m�me tu as propos� une solution pour l'obtenir.

Mais si tu regardes bien par rapport � mon objectif (qui est juste d'obtenir un objet JS � partir d'un fichier .json) la m�thode du d�but suffit et rajouter une �tape pour obtenir ce fameux "strJSON" n'apporte rien (je veux dire par rapport � l'objectif)

objJS est DEJA un objet JavaScript, utilisable dans le reste du code.

Exactement ! Et c'est tout ce que je voulais. Je n'ai pas besoin de la string "strJSON" dans le reste du code JS et si je voulais voir la string "strJSON" eh bien je l'ai d�j� dans le fichier json � deux apostrophes (ou guillemets) pr�s...

[Beginner.]

N.B. Par contre, je ne sais pas si (ni quand*) il faut utiliser var, let ou const...
(* la nuance m'�chappe un peu)

Ah ben Daniel justement avait post� des liens qui disaient en gros qu'il fallait abandonner "var" et utiliser "let"... Il y a plusieurs fils sur le forums o� la solution au probl�me �tait juste de remplacer "var" par "let" si cela t�int�resse...

EDIT : un exemple : Boucle sur src image (le probl�me avec var est expos� dans la faq dont NoSmoking a donn� le lien)

[Watilin]

Coucou,
de ce que j�ai cru comprendre @Beginner., tu raisonnes plus en termes de fichier que d�un d�tail du langage en lui-m�me. Mais je ne suis pas s�r, vu la confusion qui semble r�gner sur ce fil.

Peut-�tre est-il bon de se (re)pencher sur la signification de JSON : JavaScript Object Notation. Comme son nom l�indique, il s�agit d�un sous-ensemble de la syntaxe de JavaScript. Par cons�quent, si un logiciel peut interpr�ter du JS, il peut �galement interpr�ter du JSON.
Cela r�pond � ta premi�re question :

Apparemment �a fonctionne mais j'aimerais avoir une confirmation, peut-il y avoir des probl�mes dans certains cas ?

Non : si le JSON �tait valide au d�part, le JS produit avec ta m�thode sera valide.

La grammaire de JSON est enti�rement d�crite sur json.org. On y remarque entre autres que :

• les types de valeurs possibles sont Null, bool�en, nombre, cha�ne, objet ou tableau � �a veut dire notamment pas de fonctions ;
• les cl�s de propri�t�s sont obligatoirement entre guillemets (je vais revenir l�-dessus) ;
• la derni�re entr�e d�un objet ou d�un tableau ne doit pas �tre suivie d�une virgule. �a c�est parfois un peu chiant mais on n�y peut rien, faut faire avec.

Il ne faut pas ajouter des guillemets mais des apostrophes : '
Oui car les guillemets sont d�j� utilis�es � l'int�rieur...

C�est un peu plus compliqu� que �a, car il peut y avoir des apostrophes � l�int�rieur des cha�nes du JSON, qui seront alors prises pour un d�limiteur de cha�ne dans ton script, entra�nant � coup s�r une erreur de syntaxe.

Ce que fait un outil de � s�rialisation � comme JSON.stringify, c�est produire une repr�sentation de l�objet donn�, en s�assurant que les guillemets qui ne sont pas des d�limiteurs sont �chapp�s : \". Les apostrophes sont neutres pour JSON, et ne sont donc pas �chapp�es ; de m�me que les backticks `.

Si tu veux entourer une source JSON (pas une cha�ne entre d�limiteurs, mais bien le code source brut de ton fichier .json) avec les d�limiteurs de ton choix, il faut d�abord passer un coup de .replace() pour �chapper le caract�re choisi.

La seule diff�rence que j'ai constat� pour l'instant c'est les cl�s qui sont entre guillemets (cf. mon message #10)

En fait, dans la repr�sentation interne d�un objet JS, les cl�s sont de type cha�ne. Quand tu fais une boucle for..in, tu obtiens des noms de propri�t�s qui sont des cha�nes. Idem quand tu appelles Object.getOwnPropertyNames.

Les syntaxes fruits.abricot et fruits["abricot"] sont �quivalentes.
� la d�claration d�un objet litt�ral, on n�est pas oblig� de mettre les guillemets : on peut �crire fruits = { abricots: 42 } ou fruits = { "abricots": 42 }.

Seulement, il y a des cas o� on ne peut pas se passer des guillemets, par exemple legumes["pomme de terre"]. La propri�t� fonctionne toujours comme toute autre propri�t� d�objet au regard des fonctionnalit�s de JavaScript (for..in, etc.), seulement on ne peut pas �crire legumes.pomme de terre car �a fait une erreur de syntaxe ou un changement dans la s�mantique du script.

Les r�gles de JSON ont seulement impos� les guillemets pour simplifier la grammaire, et ainsi rendre plus facile la mise en �uvre des outils d�interpr�tation / production de JSON.

[Beginner.]

Merci bien Watilin pour cette r�ponse d�taill�e et instructive.
Je passe en "r�solu"...