Discussion :

[Mandragore99]

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

[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 :

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

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

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

d'un autre côté, tu ne le demandes pas !

[Mandragore99]

Bonjour NoSmoking et merci pour ta réponse.

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)

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):

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 :

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

statement_Month = []

[Mandragore99]

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

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
<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 ?

[NoSmoking]

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 :

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

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 :

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

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 :

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

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

[Mandragore99]

D'accord, je vais suivre tes indications :

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

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"

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

• 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 :

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
<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 :

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

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

Console log:

Si je choisi un seul fichier a exploiter :

var i ; 0 Statement_Month ; ["MARS"]

Si je choisi 2 fichier ou plus:

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

d'ou viens l'erreur à ton avis ?