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"...