Première version fonctionelle des filtres des données du fichier + tests.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freecsv2html",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Conversion of a csv file into an HTML code with selection lists, data sorting, etc.",
   "main": "index.js",
   "scripts": {

src/freeCSV2HTML.ts

@@ -111,22 +111,9 @@ export class freeCSV2HTML
         }
         else
         {
+            let converter=this; // pour les situations ambigues
             // Affichage initial des données du fichier
-            this.datasHTML="<table><thead>";
+            this.datasHTML=this.createDatasHTML(this.parseMeta.fields, this.parseDatas);
-            for (let i in this.parseMeta.fields)
-                this.datasHTML+="<th>"+this.parseMeta.fields[i]+"</th>";
-            this.datasHTML+="</thead><tbody>";
-            for (let row in this.parseDatas)
-            {
-                this.datasHTML+="<tr>";
-                for(let field in this.parseDatas[row])
-                {
-                    if( this.parseMeta.fields.indexOf(field) !== -1) // si les erreurs papaParse sont acceptées, il peut y avoir des données en trop : "__parsed_extra"
-                        this.datasHTML+="<td>"+this.parseDatas[row][field]+"</td>";
-                }
-                this.datasHTML+="</tr>";
-            }
-            this.datasHTML+="</tbody></table>";
             this._datasViewElt.eltDOM.innerHTML=this.datasHTML;
 
             // Si demandé, création des listes permettant de filter les données
@@ -156,16 +143,62 @@ export class freeCSV2HTML
                                  selectorsHTML[i]+="<option value='"+(Number(j)+1)+"'>"+values[j]+"</option>";
                             selectorsHTML[i]+="</select>";
                             this._datasSelectors[i].eltDOM!.innerHTML=selectorsHTML[i];// je force avec "!", car l'existence de eltDOM a été testée par le setter.
+                            // On rechargera les données lors de chaque choix de l'utilisateur
+                            let selectElement = document.getElementById("CSVDatasSelector"+i) as HTMLInputElement;
+                            selectElement.addEventListener('change', function(e)
+                           {
+                                converter.datasHTML=converter.createDatasHTML(converter.parseMeta!.fields as string[], converter.parseDatas);
+                                converter._datasViewElt.eltDOM!.innerHTML=converter.datasHTML;
+                            });
                         }
-
-                        // suite : https://stackoverflow.com/questions/19329978/change-selects-option-and-trigger-events-with-javascript
                     }
                 }
             }
             return true;
         }
-        
     }
+
+    private createDatasHTML(fields: string[], datas: any[]) : string
+    {
+        // Je vérifie si des valeurs ont été sélectionnées pour filter les données
+        let checkContainerExist: HTMLSelectElement|null, filters: any[] = [];
+        for(let i in this._datasSelectors)
+        {
+            checkContainerExist=document.querySelector("#"+ this._datasSelectors[i].id+" select");
+            if(checkContainerExist != null && checkContainerExist.value != "0")
+                filters.push({ field: this._datasSelectors[i].name, value: this._datasSelectors[i].values![checkContainerExist.selectedIndex-1] });
+        }// ! si on récupère innerHTML du select, certains caractères peuvent être modifiés !
+        
+        let datasHTML="<table><thead>";
+        for (let i in fields)
+            datasHTML+="<th>"+fields[i]+"</th>";
+        datasHTML+="</thead><tbody>";
+        for (let row in datas)
+        {
+            let view=true;
+            if(filters.length !== 0)
+            {
+                for(let i in filters)
+                {
+                    if(datas[row][filters[i].field] != filters[i].value)
+                        view=false;
+                }
+            }
+            if(view)
+            {
+                datasHTML+="<tr>";
+                for(let field in datas[row])
+                {
+                        if(fields.indexOf(field) !== -1) // si les erreurs papaParse sont acceptées, il peut y avoir des données en trop : "__parsed_extra"
+                            datasHTML+="<td>"+datas[row][field]+"</td>";
+                }
+                datasHTML+="</tr>";
+            }
+        }
+        datasHTML+="</tbody></table>";
+        return datasHTML;
+    }
+    
 }
 /* Exemple d'appelle complet à papaparse :
         Papa.parse(url, {

tests/freeCSV2HTMLSpec.ts

@@ -139,7 +139,7 @@ describe("freeCSV2HTML", () =>
             expect(document.getElementById("selector2").innerHTML).toEqual(fixtures.selector2HTML);
         });
       
-        it("Le choix d'un option dans un des sélecteurs doit modifier le contenu du tableau pour ne garder que les données valides pour ce choix et afficher toutes les données si sélection 0.", async () =>
+        it("Le choix d'un option dans un des sélecteurs doit modifier le contenu du tableau pour ne garder que les données correspondantes ou les afficher toutes si sélection 0.", async () =>
         {
             converter.datasViewElt={ id:"datas" };
             converter.datasSourceUrl="http://localhost:9876/datas/elements-chimiques.csv";
@@ -158,7 +158,7 @@ describe("freeCSV2HTML", () =>
             expect(txtDatasViewsElt).toEqual(fixtures.datasHTML);
 
             selectElement = document.getElementById("CSVDatasSelector1")  as HTMLInputElement;           
-            selectElement.value="1";
+            selectElement.value="4";
             selectElement.dispatchEvent(new Event('change'));
             txtDatasViewsElt=document.getElementById("datas").innerHTML;
             expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelect2);
@@ -169,6 +169,24 @@ describe("freeCSV2HTML", () =>
             expect(txtDatasViewsElt).toEqual(fixtures.datasHTML);
         });
 
+       it("Si plusieurs sélecteurs sont utilisés, seules les données correspondant aux différents choix sont affichées.", async () =>
+        {
+            converter.datasViewElt={ id:"datas" };
+            converter.datasSourceUrl="http://localhost:9876/datas/elements-chimiques.csv";
+            converter.datasSelectors=[{ colCSV:3, id:"selector1"},{ colCSV:4, id:"selector2"}];
+            await converter.run();
 
+            let selectElement = document.getElementById("CSVDatasSelector0") as HTMLInputElement;
+            selectElement.value="2";
+            selectElement = document.getElementById("CSVDatasSelector1")  as HTMLInputElement;           
+            selectElement.value="1";
+            selectElement.dispatchEvent(new Event('change'));
+            let txtDatasViewsElt=document.getElementById("datas").innerHTML;
+            expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelect3);
+            selectElement.value="4";
+            selectElement.dispatchEvent(new Event('change'));
+            txtDatasViewsElt=document.getElementById("datas").innerHTML;
+            expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelect4);
+        });
     });
 });