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');
}

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager