[RÉSOLU] Ouverture et manipulation d'un fichier JSON local

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Vangeles
Messages : 5
Enregistré le : 30 avr. 2020, 09:05

[RÉSOLU] Ouverture et manipulation d'un fichier JSON local

Message par Vangeles » 30 avr. 2020, 11:32

Bonjour,

Je m'explique (en essayant de faire court).
J'ai un fichier externe json. Il y a un tableau des genres musicaux qui contiennent un tableau des groupes qui contiennent un tableau des albums. Chaque élément à ses caractéristiques. Extrait

Code : Tout sélectionner

{
  "genre": [
    {
      "name": "Hard Metal",
      "color": "Black",
      "groupes": [
        {
          "name": "AC-DC",
          "icon": "AC-DC.png",
          "albums": [
            {
              "name": "Highway To Hell",
              "year": "1979",
              "icon": "HighwayToHell.png",
              "lyrics": "Highway.txt"
            },
            {
              "name": "Back In Black",
              "year": "2000",
              "icon": "BinB.png",
              "lyrics": "Back.txt"
            }
          ]
        },
        {
          "name": "Deep Purple",
          "icon": "DeepPurple.png",
          "albums": [
            {
              "name": "Infinite",
              "year": "2017",
              "icon": "Infinite.png",
              "lyrics": "Infinite.txt"
            }
          ]
        }
      ]
    },
    {
      "name": "Classical",
      "color": "Blue",
      "groupes": [
        {
          "name": "Mozart",
          "icon": "Mozart.png",
          "albums": [
            {
              "name": "String K563",
              "year": "1791",
              "icon": "String Ensemble.png",
              "lyrics": ""
            }
          ]
        }
      ]
    }
  ]
}

Ce fichier est en local (PC ou site) et je voudrais la manipuler en Javascript. Il me faut donc l'ouvrir, puis le charger, le manipuler et enfin écrire de nouveaux éléments pour enfin le sauvegarder.
Ma demande est priorisée car l'ajout d'éléments sera sûrement plus complexe.
J'ai cherché à reproduire bêtement des exemples comme celui-ci sans résultat concret.

Pouvez-vous m'orienter vers des explications claires qui me permettent de comprendre ce que je dois faire afin d'atteindre l'objectif que je tente d'atteindre.
J'ai testé en insérant mon json dans le programme par la commande <script...>; ça fonctionne mais ce n'est pas du tout le but puisque mon fichier json fait plusieurs centaines de lignes et que je veux garder son indépendance pour d'autres manipulations.

Et, si je peux me permettre, confirmez-vous qu'un fichier externe plat (.txt) ne peut pas être lu/écrit en Javascript ?

Merci pour vos réponses même partielles.
Modifié en dernier par Vangeles le 02 mai 2020, 23:05, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 234
Enregistré le : 28 févr. 2017, 15:19

Re: Ouverture et manipulation d'un fichier JSON local

Message par webmaster » 30 avr. 2020, 11:56

Bonjour,

Je recommande de passer par le JSON en direct dans le script pour apprendre a le manipuler.
C'est infiniment plus facile qu'un fichier plat !

Code : Tout sélectionner

<script>
	
var music=	{
  "genre": [
    {
      "name": "Hard Metal",
      "color": "Black",
      "groupes": [
        {
          "name": "AC-DC",
          "icon": "AC-DC.png",
          "albums": [
            {
              "name": "Highway To Hell",
              "year": "1979",
              "icon": "HighwayToHell.png",
              "lyrics": "Highway.txt"
            },
            {
              "name": "Back In Black",
              "year": "2000",
              "icon": "BinB.png",
              "lyrics": "Back.txt"
            }
          ]
        },
        {
          "name": "Deep Purple",
          "icon": "DeepPurple.png",
          "albums": [
            {
              "name": "Infinite",
              "year": "2017",
              "icon": "Infinite.png",
              "lyrics": "Infinite.txt"
            }
          ]
        }
      ]
    },
    {
      "name": "Classical",
      "color": "Blue",
      "groupes": [
        {
          "name": "Mozart",
          "icon": "Mozart.png",
          "albums": [
            {
              "name": "String K563",
              "year": "1791",
              "icon": "String Ensemble.png",
              "lyrics": ""
            }
          ]
        }
      ]
    }
  ]
}
console.log(music);
console.log(music.genre[0].name)

</script>
console.log(music.genre[0].name) affiche bien "Hard Metal"

Ensuite, pour accéder au JSON distant, c'est tout aussi facile avec ajax.
https://www.toutjavascript.com/referenc ... equest.php
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Vangeles
Messages : 5
Enregistré le : 30 avr. 2020, 09:05

Re: Ouverture et manipulation d'un fichier JSON local

Message par Vangeles » 30 avr. 2020, 12:09

webmaster a écrit :
30 avr. 2020, 11:56
Je recommande de passer par le JSON en direct dans le script pour apprendre a le manipuler.
Merci pour ta réponse. Javais déjà intégré un json dans mon programme quand je disais
J'ai testé en insérant mon json dans le programme par la commande <script...>; ça fonctionne mais ce n'est pas du tout le but
Mais ma bibliothèque comporte presque 3000 albums...
Il me faut donc regarder de plus près Ajax. J'en fais un retour dès que j'ai des éléments significatifs.
Cdlt

Vangeles
Messages : 5
Enregistré le : 30 avr. 2020, 09:05

Re: Ouverture et manipulation d'un fichier JSON local

Message par Vangeles » 30 avr. 2020, 18:29

Bonsoir,

En fait j'avance ... doucement.
Précisions importantes. Firefox 68.7.0esr sous Linux Mint LMDE4
Comme dit précédemment, si j'intègre mes données json dans le programme lui-même, pas de soucis. C'est quand je veux y accéder dans un fichier séparé que ça se complique. Voilà donc mes observations:

- si je mets le fichier en local, il me dit
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///home/patrick/T%C3%A9l%C3%A9chargements/. Raison : la requête CORS n’utilise pas http
Si je comprends bien, puisque ma requète n'est pas hhtp --> Refus

- si je mets mon fichier à distance (serveur)
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://............ Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.
Explication ici mais je ne sais pas trop quoi faire

- d'ailleurs, en testant location.href comme dans l'exemple du site, il me dit
L’utilisation d’XMLHttpRequest de façon synchrone sur le fil d’exécution principal est obsolète à cause de son impact négatif sur la navigation de l’utilisateur final
Même si c'est warning ... avec l'attribut true ça marche mais là je risque d'avoir des problèmes de synchronisation si ma requète est trop longue.

Bref je n'avance pas.
Moi, ce que je voudrais, c'est que ces 4 lignes fonctionnent.

Code : Tout sélectionner

	xhr_object = new XMLHttpRequest(); 
	xhr_object.open("GET", "Music.json", true);  
	xhr_object.onreadystatechange = function() { 
		if(xhr_object.readyState == 4) alert(xhr_object.responseText); 
		} 
	xhr_object.send(null);
comme dans l'exmple du site, mais rien à faire. Je pense que Firefox y est pour un peu ... Je creuse mais là je commence à plus voir le jour (au propre et figuré).
Cdlt

Avatar du membre
webmaster
Administrateur du site
Messages : 234
Enregistré le : 28 févr. 2017, 15:19

Re: Ouverture et manipulation d'un fichier JSON local

Message par webmaster » 30 avr. 2020, 18:49

Le AJAX implique que les fichiers soient sur le meme domaine.
Sinon, il faut configurer des entetes pour autoriser les transferts...

A mon avis la console devrait montrer ce qui se passe au niveau réseau dans l'onglet network
Il faut vérifier que l'appel reseau se lance bien et que le retour est bien valide.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Vangeles
Messages : 5
Enregistré le : 30 avr. 2020, 09:05

Re: Ouverture et manipulation d'un fichier JSON local

Message par Vangeles » 02 mai 2020, 23:04

Bonsoir,
Suite aux essais et à la lecture des exemples sur les forums, j'ai contourné la difficulté en utilisant la référence à un fichier externe dans le commande HTML <SCRIPT> comme suit:

Code : Tout sélectionner

<script type='text/javascript' src='Music.json'></script>
Il suffit (mais ce n'est pas propre) que j'ajoute la définition de variable en début de fichier json .
Donc je vais poursuivre mon développement même si ce n'est pas la méthode que j'avais visée. J'y reviendrai peut-être plus tard ...
Merci.

Avatar du membre
webmaster
Administrateur du site
Messages : 234
Enregistré le : 28 févr. 2017, 15:19

Re: [RÉSOLU] Ouverture et manipulation d'un fichier JSON local

Message par webmaster » 03 mai 2020, 11:01

Bonjour

J'ai ajouté un 2eme exemple sur la fiche JSON d'un appel à un JSON externe :
https://www.toutjavascript.com/reference/ref-json.php

C'est vraiment simple quand on regarde bien la console
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre