Charger, formater un fichier JSON et l'exporter en TXT

**Macmachi** · 22/11/2016, 11h29

Bonjour,

Je suis sur un application qui me génère un JSON de mon array permettant ainsi d'exporter les données contenues de mon array. Le problème est que le code JSON ressemble à cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"array":true,"size":[10,2,1],"data":[[["***TEST 1***"],["Détails ci-dessous"]],[["test_term"],["true"]],[["test_score"],[10]],[["***TEST 2***"],["Détails ci-dessous"]],[["test_term"],["true"]],[[0],[0]],[[0],[0]],[[0],[0]],[[0],[0]],[[0],[0]]]}

Comme vous pouvez le voir j'ai déjà rajouté des champs dans mon array afin d'avoir une structure plus visible dans le fichier JSON avec ["***TEST 1***"] (notre X du tableau) et ["Détails ci-dessous"] la value.
Bref, en fait j'aimerai que ce JSON soit lisible par un néophyte et donc que l'utilisateur puisse formater ce fichier JSON sur une page en l'uploadant et ensuite en sortie il obtient un fichier texte (ou autre?) formaté de cette façon :

ETAPE 1 - SAUT DE LIGNE avant "[["

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
{"array":true,"size":[10,2,1],"data":
[[["***TEST 1***"],["Détails ci-dessous"]],
[["test_term"],["true"]],
[["test_score"],[10]],
[["***TEST 2***"],["Détails ci-dessous"]],
[["test_term"],["true"]],
[[0],[0]],
[[0],[0]],
[[0],[0]],
[[0],[0]],
[[0],[0]]]}

Donc en fait à chaque double "[[" cote à cote j'aimerai pouvoir sauter une ligne.

ETAPE 2 (optionnelle si trop compliqué je laisse tombé) : j'aimerai si possible supprimer les [[ ]] et pourquoi pas les virgules suivants ]] :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
{"array":true,"size":[10,2,1],"data":
"***TEST 1***","Détails ci-dessous"
,"test_term","true"
"test_score",10
"***TEST 2***","Détails ci-dessous"
"test_term","true"
0,0
0,0
0,0
0,0
0,0}

J'ai déjà trouvé un bout de code qui semble pouvoir chargé un fichier JSON (même si je vois rien une fois sélectionné) après je ne sais pas du tout comment faire en sorte que le javascript formate le fichier JSON uploadé (charger celui-ci dans un text area invisible?) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<body>
 
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
 
  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>
 
 
<script type="text/javascript">
 
  function loadFile() {
    var input, file, fr;
 
    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }
 
    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }
 
    function receivedText(e) {
      lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>
 
</body>
</html>

Si vous arrivez à m'aider et me dire si cela est faisable avant que j'attaque le travail. Je vous remercie d'avance !

**sekaijin** · 22/11/2016, 18h18

https://jsonformatter.curiousconcept.com/

**Macmachi** · 22/11/2016, 18h52

Salut, merci pour le site je suis déjà tombé dessus mais c'est pas vraiment que je recherche à faire. Elle garde la structure du JSON moi j'aimerai le formater en texte brute et qu'en sortie j'aie plutot un txt ou un doc. De plus j'aimerai créer ma propre solution car les données JSON sont assez sensibles.

**Watilin** · 22/11/2016, 19h54

Il te faut une (ou plusieurs) expression(s) rationnelle(s). Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

json.replace(/(?:\[\[)|(?:\]\],?)/g, '\n')

Et pour la sortie texte, voici un petit exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var text = 'Voyez ce bon fakir moqueur pousser un wagon en jouant du xylophone\xA0!';
var $a = document.createElement('a');
$a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
$a.download = 'fichier.txt';
$a.style.display = 'none';
document.body.appendChild($a);
$a.click();
$a.remove();

**Macmachi** · 22/11/2016, 21h45

Wouha merci pour ton aide ! Ton code pour l'exportation marche vraiment bien, exactement comme je voulais ! J'ai essayé d'intégrer ton code au code que j'ai trouvé du coup j'importe le JSON et cela l'exporte en TXT donc cela fonctionne bien de ce coté, par contre ta fonction de formatage ne semble malheureusement pas fonctionner. Ca fait un moment que j'ai plus fait de Javascript du coup cela vient peut-être de moi (voir code ci-dessous). Aurais-tu une idée pourquoi celle-ci ne formate pas ma variable "text" ? Et si j'ai bien compris ton code me fait un retour à la ligne à chaque [[ ou chaque ]] c'est cela (n'ayant pas pu encore le testé) ?

Code de formatage intégré au code de base :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
   function receivedText(e) {
   var text = e.target.result;
   text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n')

Le code entier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<body>
 
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
 
  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>
 
 
<script type="text/javascript">
 
  function loadFile() {
    var input, file, fr;
 
    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }
 
    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }
 
   function receivedText(e) {
   var text = e.target.result;
   text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n')
   var $a = document.createElement('a');
   $a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
   $a.download = 'fichier.txt';
   $a.style.display = 'none';
   document.body.appendChild($a);
   $a.click();
   $a.remove();	  
    }
  }
</script>
 
</body>
</html>

**Watilin** · 22/11/2016, 22h04

Désolé si je n’ai pas été assez clair. La méthode replace renvoie une nouvelle chaîne en résultat, elle ne touche pas à la chaîne originale. Tu devrais mettre un return dans ta fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function receivedText(e) {
   var text = e.target.result;
   return text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
}

**Macmachi** · 22/11/2016, 22h44

Merci pour tes précisions mais cela ne semble pas fonctionner. Comme tu as fermé la fonction j'en ai fait une autre concernant l'export dont je fais appel dans celle du formatage mais rien ne se passe comme si il y avait une erreur dans mon code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = formatText;
      fr.readAsText(file);
    }
 
   function formatText(e) {
   var text = e.target.result;
   return text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
   receivedText(e);
   }
 
   function receivedText(e) {
   var $a = document.createElement('a');
   $a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
   $a.download = 'fichier.txt';
   $a.style.display = 'none';
   document.body.appendChild($a);
   $a.click();
   $a.remove();	  
    }

**SpaceFrog** · 23/11/2016, 08h12

Il n'y a plus de vie après un return ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
return text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
   receivedText(e);

**Macmachi** · 23/11/2016, 11h45

Merci j'avais oublié du coup j'ai pas utilisé return mais une nouvelle variable et cela fonctionne mais le formatage ne se produit que dans l'alerte que j'ai défini pour test et non pas pas dans le fichier texte exporté.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }
 
   function receivedText(e) {
   var text = e.target.result;
   var textFormat = text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
   alert(textFormat); /*ICI le formatage fonctionne mais pas une fois exporté dans le fichier txt ci-dessous*/
   var $a = document.createElement('a');
   $a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(textFormat);
   $a.download = 'fichier.txt';
   $a.style.display = 'none';
   document.body.appendChild($a);
   $a.click();
   $a.remove();	  
    }

Formatage donné avec l'alert :
(C'est déjà pas mal comme formatage mais je vais essayé de l'améliorer en supprimant les derniers crochets par contre j'arrive pas à retrouver la signification des [)|(?:\, dans le "replace" j'ai pourtant relu la documentation : https://developer.mozilla.org/fr/doc...String/replace)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
["***TEST 1***"],["Détails ci-dessous"
 
"test1_term"],["true"
 
"test1_score"],[10
 
"***TEST 2***"],["Détails ci-dessous"
 
"test2_term"],["true"
 
0],[0
 
0],[0
 
0],[0
 
0],[0
 
0],[0
]}

Code en entier (non fonctionnel pour l'instant) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
 
<body>
 
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
 
  <fieldset>
    <h2>Convertisseur JSON -> TXT</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>
 
 
<script type="text/javascript">
 
  function loadFile() {
    var input, file, fr;
 
    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }
 
    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }
 
   function receivedText(e) {
   var text = e.target.result;
   var textFormat = text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
   alert(textFormat);
   var $a = document.createElement('a');
   $a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(textFormat);
   $a.download = 'fichier.txt';
   $a.style.display = 'none'; 
   document.body.appendChild($a);
   $a.click();
   $a.remove();	  
    }
  }
</script>
 
</body>
</html>

**sekaijin** · 23/11/2016, 15h18

un outil d'analyse répond peut être au besoin
https://github.com/shapesecurity/shift-parser-js
pour parser la source
https://github.com/shapesecurity/shift-codegen-js
pour générer la sortie

http://shift-ast.org/ va bien au delà d'un simple formateur de code.

https://github.com/shapesecurity?utf...93&query=shift

A+JYT

**Watilin** · 23/11/2016, 15h42

Chez moi ça marche, je reçois bien un fichier contenant le JSON formatté.

Si tu veux aller plus loin dans le formatage il te faudra mieux comprendre les regexps. Par exemple celle que j’ai écrite se décompose en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/(?:\[\[)|(?:\]\],?)/g

Les parenthèses (?: … ) sont des groupes non capturants. Ils indiquent au moteur de grouper le contenu, mais sans garder de référence dessus. Dans ton cas ça ne change rien au résultat, tu pourrais utiliser des groupes capturants dont la syntaxe est plus simple, c’est juste une optimisation. Avec des groupes capturants ta regexp serait comme ceci : /(\[\[)|(\]\],?)/g.

Dans tous les cas, on a en gros une structure en deux groupes : /groupeA|groupeB/g avec la barre entre les deux qui signifie « ou bien ».

Le groupe A est \[\[ soit deux crochets ouvrants ;
le groupe B est \]\],? soit deux crochets fermants avec optionnellement une virgule.

Que ce soit l’un ou l’autre groupe, il est remplacé par la même chose via la méthode replace.

**SpaceFrog** · 23/11/2016, 16h32

Sinon un petit utilitaire sympa : JSONEdit ...

**Macmachi** · 23/11/2016, 16h44

Merci à tous pour votre aide et merci à toi Watilin pour ces explications. Donc maintenant j'ai deux lignes qui formate exactement comme je voulais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
   var textFormat1 = text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
   var textFormat2 = textFormat1.replace(/(?:\[)|(?:\])/g, '');

C'est parfait mais je n'arrive pas à comprendre pourquoi mon texte de sortie n'est pas formaté j'ai essayé avec Firefox et Chrome rien n'y fait

Si d'autres personnes peuvent tester mon code et me dire si chez elle cela marche et si oui avec quel navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
 
<head>
  <title>Convertisseur_JSON-TXT</title>
</head>
 
<body>
 
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
 
  <fieldset>
    <h2>Convertisseur JSON -> TXT</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>
 
 
<script type="text/javascript">
 
  function loadFile() {
    var input, file, fr;
 
    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }
 
    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }
 
   function receivedText(e) {
   var text = e.target.result;
   var textFormat1 = text.replace(/(?:\[\[)|(?:\]\],?)/g, '\n');
   var textFormat2 = textFormat1.replace(/(?:\[)|(?:\])/g, '');
   /*Pour test : alert(textFormat2);*/
   var $a = document.createElement('a');
   $a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(textFormat);
   $a.download = 'fichier.txt';
   $a.style.display = 'none'; 
   document.body.appendChild($a);
   $a.click();
   $a.remove();	  
    }
  }
</script>
 
</body>
</html>

EDIT : Ok cela fonctionne en fait cela l'ouvrait dans le bloc note et donc détruisait je pense le formatage dans word ou wordpad cela fonctionne bien ! Merci à tous !

Charger, formater un fichier JSON et l'exporter en TXT

JavaScript

Discussions similaires

Partager

Partager