Extraire les données de plusieurs fichiers .TXT

Version imprimable

Bonjour à tous,

Je suis nouveau en JS et je souhaite stocker les données de plusieurs fichiers .TXT dans des variables de type ARRAY.

Voici la structure des fichiers .TXT:
MOIS;ANNEE;CLIENT

voici le code que j'ai modifié. L'alerte contiens les bonnes données mais pas les variables.

Code:

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
<input type="file" id="fileinput" multiple />
<script type="text/javascript">
function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files;
    var Statement_Fname = [];
    var statement_Month = [];
    var statement_Year = [];
    var statement_client = [];
    for (var i = 0, f; f = files[i]; i++) {
        Statement_Fname[i] = files[i].name
        var r = new FileReader();
        r.onload = (function(f) {
            return function(e) {
                var contents = e.target.result;
                var splt = contents.split(";")
                statement_Month[i] = splt[0];
                statement_year[i] = splt[1];
                statement_client[i] = splt[2];
                alert(contents);
            };
        })(f);
        r.readAsText(f);
    }
}
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>

J'arrive récupérer le nom des fichiers dans l'array de Statement_Fname mais pas dans les statement_Month[i] /year / client.

Pouvez-vous m'aider à résoudre ce problème ?

Merci d'avance

17/02/2019, 18h16
NoSmoking
Bonjour,
problème lié au « scope » de ta variable i, que vaut-elle quand la fonction sur le retour, r.onload, s’exécute ?

Plusieurs solutions dont le passage par l'utilisation de la déclaration de ta variable via un let i et non un var i dans ta boucle.

Pour moi un simple push de tes valeurs fait l'affaire
Code:

1 2 3 statement_Month.push( splt[0]); statement_year.push( splt[1]); statement_client.push( splt[2]);
Citation:

L'alerte contiens les bonnes données mais pas les variables.

d'un autre côté, tu ne le demandes pas !
18/02/2019, 00h24
Mandragore99

Bonjour NoSmoking et merci pour ta réponse.

Citation:

que vaut-elle quand la fonction sur le retour, r.onload, s’exécute ?

Voici le résultat des Scope Local juste après exécution du du r.onload :
1er passage de la boucle (fichier 1)

Citation:

Statement_Fname: ["Data2.txt"]
evt: Event {isTrusted: true, type: "change", target: input#fileinput, currentTarget: input#fileinput, eventPhase: 2, …}
f: File {name: "Data2.txt", lastModified: 1550367663888, lastModifiedDate: Sun Feb 17 2019 02:41:03 GMT+0100 (heure normale d’Europe centrale), webkitRelativePath: "", size: 43, …}
files: FileList {0: File, 1: File, length: 2}
i: 0
r: FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null, …}
statement_Client: []
statement_Month: []
statement_Year: []

2ème passage de la boucle (fichier2):

Citation:

Statement_Fname: (2) ["Data2.txt", "Data1.txt"]
evt: Event {isTrusted: true, type: "change", target: input#fileinput, currentTarget: input#fileinput, eventPhase: 2, …}
f: File {name: "Data1.txt", lastModified: 1550360012972, lastModifiedDate: Sun Feb 17 2019 00:33:32 GMT+0100 (heure normale d’Europe centrale), webkitRelativePath: "", size: 49, …}
files: FileList {0: File, 1: File, length: 2}
i: 1
r: FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null, …}
statement_Client: []
statement_Month: []
statement_Year: []

Même constat en modifiant le code avec votre proposition :

statement_Month.push( splt[0]);

Code:

statement_Month = []

Voilà, j'ai réussi à résoudre le souci avec le code suivant:

Code:

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
<input type="file" id="fileinput" multiple />
<div>BONJOUR</div>
<script type="text/javascript">
function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files;
        var Statement_Fname =[] ;
        var statement_Month=[];
        var statement_TA =[];
        var statement_Year =[];
        var statement_ISIN =[];
        var statement_Client =[]; 
                for (var i = 0, f; f = files[i]; i++) {
                        var r = new FileReader();
                        Statement_Fname = files[i].name
                        r.onload = (function (f) {
                                return function (e) {
                                        var contents = e.target.result;
                                };
                        })(f);
                        r.readAsText(f);
                        var splt = r.result.split('\n');
                        statement_Month[i] = splt[0];
                        statement_Year[i] = splt[1];
                        statement_TA[i] = splt[2];
                        statement_ISIN[i] = splt[3];
                        statement_Client[i] = splt[4]; 
                        var list = document.getElementsByTagName("div")[0];
                        list.innerHTML = statement_Month[0] + statement_Month[1]
                        //list.innerHTML = statement_Year.indexOf("2019");
                }
}
 
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
 
</script>

Seulement, lorsque j'exécute le code en mode pas à pas, les variables s'inscrivent correctement, mais dès que j'execute le code en "réel", les variables restent "undefined", comme si cela allait trop vite pour la fonction split et qu'elle n'avait pas le temps de séparer les chaines de caractères. Avez-vous une idée d'ou viens cette erreur ?

Je crois que tu n'as pas compris ce que j'ai essayé, visiblement mal, de t'expliquer.

La fonction appelée sur le onload est asynchrone, le résultat n'est donc pas immédiatement disponible.

Dans la boucle for ... ajoute un console.log( "var i ;", i); et observe la console.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function readMultipleFiles(evt) { var files = evt.target.files; var Statement_Fname = []; for (var i = 0, f; f = files[i]; i++) { Statement_Fname[i] = files[i].name var r = new FileReader(); r.onload = (function(f) { return function(e) { console.log("var i : ", i); }; })(f); r.readAsText(f); } }
Après fait la même chose en utilisant une déclaration du i via un let
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function readMultipleFiles(evt) { var files = evt.target.files; var Statement_Fname = []; for (let i = 0, f; f = files[i]; i++) { Statement_Fname[i] = files[i].name var r = new FileReader(); r.onload = (function(f) { return function(e) { console.log("var i : ", i); }; })(f); r.readAsText(f); } }
observe et note la différence.

Autres remarques :
• dans ton code tu déclares var statement_Year = [] mais tu utilises statement_year = [] ce qui ne manque pas de générer une erreur.

• Tes tableaux déclarés dans ta fonction ne sont visibles que dans ta fonction et donc non utilisable ailleurs. C'est dans ta fonction même que tu dois les exploiter ou passer par une fonction pour l'affichage comme tu l'as approché.
Code:

1 2 3 4 5 6 7 r.onload = (function(f) { return function(e) { var contents = e.target.result; var splt = contents.split(";") fctAffichage( splt); }; })(f);

D'accord, je vais suivre tes indications :

Citation:

Dans la boucle for ... ajoute un console.log( "var i ;", i); et observe la console.

Les résultats sont les suivants:
Si 3 fichiers séléctionnés:
3open file JS.html:18
var i ; 3

Citation:

Après fait la même chose en utilisant une déclaration du i via un let

var i ; 0
var i ; 1
var i ; 2
La console log s'execute bien a chaque passage dans la boucle, contrairement a "FOR"

Citation:

dans ton code tu déclares var statement_Year = [] mais tu utilises statement_year = [] ce qui ne manque pas de générer une erreur.

Quelle serait la bonne méthode d'après toi ? Car je ne suis pas sur de comprendre..
L'objectif final de la récupération de ces variables, serait de retrouver les données contenues dans le fichier texte de par son nom (par exemple si je recherche le Statement_Fname "Data1.txt, je veux avoir accès a son contenu afin de remplir automatiquement un formulaire).

Citation:

• Tes tableaux déclarés dans ta fonction ne sont visibles que dans ta fonction et donc non utilisable ailleurs. C'est dans ta fonction même que tu dois les exploiter ou passer par une fonction pour l'affichage comme tu l'as approché.

Voici le code que j'exploite actuellement:
Code:

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 <input type="file" id="fileinput" multiple /> <div></div> <script type="text/javascript"> function readMultipleFiles(evt) { //Retrieve all the files from the FileList object var files = evt.target.files; var Statement_Fname = []; var statement_Month = []; var statement_TA = []; var statement_Year = []; var statement_ISIN = []; var statement_Client = []; for (let i = 0, f; f = files[i]; i++) { var r = new FileReader(); Statement_Fname = files[i].name r.onload = (function(f) { return function(e) { var contents = e.target.result; var splt = r.result.split('\n'); statement_Month[i] = splt[0]; statement_Year[i] = splt[1]; statement_TA[i] = splt[2]; statement_ISIN[i] = splt[3]; statement_Client[i] = splt[4]; //var list = document.getElementsByTagName("div")[0]; //list.innerHTML = statement_Month [0] +statement_Month [1] console.log("var i ;", i, "Statement_Month ; ", statement_Month); }; })(f); r.readAsText(f); } } document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false); </script>
J'ai donc tenté de faire un console log sur la donnée "Month" Mais je n'ai que le retour du second fichier lu car le premier reste en "":

Code:

console.log( "var i ;", i, "Statement_Month ; ",statement_Month );

Console log:

Si je choisi un seul fichier a exploiter :

Citation:

var i ; 0 Statement_Month ; ["MARS"]

Si je choisi 2 fichier ou plus:

Citation:

var i ; 0 Statement_Month ; [""]
var i ; 1 Statement_Month ; (2)*["", "JANVIER
"]

d'ou viens l'erreur à ton avis ?

Citation:

d'ou viens l'erreur à ton avis ?

tu as toujours un problème de scope comme pour la variable i.

Remplace var r = new FileReader() par let r = new FileReader() et ton problème « saute ».

Indépendamment de cela, tu te compliques la vie en changeant chaque fois ton code
ton premier code :
Code:

1 2 var contents = e.target.result; var splt = contents.split(";")
ton dernier code
Code:

1 2 var contents = e.target.result; var splt = r.result.split('\n');
:koi: ce n'est pas du tout la même chose !

Ceci étant tu peux alléger ton code comme suit, tu n'es pas obligé de passer par une IIFE (Immediately Invoked Function Expressions)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function readMultipleFiles(evt) { //Retrieve all the files from the FileList object var files = evt.target.files; var Statement_Fname = []; var statement_Month = []; var statement_TA = []; var statement_Year = []; var statement_ISIN = []; var statement_Client = []; for (let i = 0, f; f = files[i]; i++) { let r = new FileReader(); Statement_Fname = files[i].name r.onload = function() { var splt = this.result.split(';'); statement_Month[i] = splt[0]; statement_Year[i] = splt[1]; statement_TA[i] = splt[2]; statement_ISIN[i] = splt[3]; statement_Client[i] = splt[4]; console.log("var i ;", i, "Statement_Month ; ", statement_Month); }; r.readAsText(f); } }

18/02/2019, 17h05
Mandragore99

1 pièce(s) jointe(s)
Citation:

Remplace var r = new FileReader() par let r = new FileReader() et ton problème « saute ».

C'est exactement cela ! Les variables prennent les bonnes valeurs a chaque boucle ! Seulement impossible d'avoir accès a ces varables une fois la procédure terminée. Y a t il un moyen de conserver ces données après l'éxecution du code ?
Aussi, pourquoi es-ce que cela ne fonctionne pas quand je fais une execution pas à pas dans la fenêtre 'SOURCE" ?

Aussi, si j'ajoute une fonction de recherche d'index "indexOf" à la suite de

Code:

console.log("var i ;", i, "Statement_Month ; ", statement_Month);

:
Code:

1 2 var FindIndex = statement_Month.indexOf("JANVIER") console.log(statement_Month , " Index JANVIER trouvé en place : ", FindIndex);
Pourquoi es-ce que le résultat est négatif ?
Pièce jointe 451195

Citation:

Indépendamment de cela, tu te compliques la vie en changeant chaque fois ton code
ton premier code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part

var contents = e.target.result;
var splt = contents.split(";")

ton dernier code
Code : Sélectionner tout - Visualiser dans une fenêtre à part

var contents = e.target.result;
var splt = r.result.split('\n');

Effectivement j'avais changé la structure de mes fichiers texte avec des sauts de ligne au lieu de ";"

Merci beaucoup pour ton aide précieuse NoSmoking!
19/02/2019, 10h15
NoSmoking
Citation:

Pourquoi es-ce que le résultat est négatif ?

parce que tu as changé ta façon de découper la réponse et que tu te retrouves avec un caractère en trop en fin de chaine.

Regarde en mettant par exemple dans ton code
Code:

1 2 var carFin = statement_Month[i].charCodeAt(statement_Month[i].length-1); console.log("split : ", statement_Month[i].split(""), "--", carFin);
Après teste avec
Code:

1 2 //var splt = this.result.split('\n'); var splt = this.result.split("\r");
24/02/2019, 20h32
Mandragore99

C'est exactement ce que je cherchais !

Merci beaucoup pour ton aide!