Impossible de récupérer un attribut liste d'une classe

cattleyas10
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code, je suis en train de créer une class javascript qui ce sert d'une autre pour récupérer une feuille excel et l'afficher dans un table , mais je suis bloqué sur un point en particulier, je vais vous mettre le code pour que vous compreniez bien mon souci

voici la classe Table qui se sert de SheetJs pour récupérer la feuille et générer le tableau html de la feuille : 

class Table{
    constructor(file,container,list_hidden_col){
        this.excelFile=file;

        this.container=$('#'+container);

        this.list_hidden_col = list_hidden_col || [];

        this.list_cell=[];
    }

    get list_cellule(){
        return this.list_cell;
    }

    readExcelFileAndConvertToHtml(){

        var reader = new FileReader();

        reader.readAsArrayBuffer(this.excelFile);

        reader.onload = function(e){

            var data = new Uint8Array(reader.result);

            var workbook = XLSX.read(data,{type:'array'}); 

            var first_sheet = workbook.SheetNames[0];

            var tableHtml = XLSX.write(workbook,{sheet:first_sheet, type:'binary',bookType:'html'});

            tableHtml = tableHtml.replace('<html><head><meta charset="utf-8"/><title>SheetJS Table Export</title></head><body><table>','');

            tableHtml = tableHtml.replace('</table></body></html>','');

            this.container.html(tableHtml);

            this.addIdToCell();

        }.bind(this);
    }

    addIdToCell(){

        var row = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

        var id="";

        var del_element = [];

        var t = document.getElementById("excelTable");

        var bool_hidden_col = false;

        for (var r = 0; r < t.rows.length; r++) 
        {
            for (var c = 0; c < t.rows[r].cells.length; c++) 
            {   
                id=row[c]+(r+1);

                t.rows[r].cells[c].id=id;

                t.rows[r].cells[c].innerHTML = decodeURIComponent(escape(t.rows[r].cells[c].innerHTML.replace('<br>','  ')));

                t.rows[r].cells[c].className="cliquable";

                for(var i = 0 ; i < this.list_hidden_col.length ; i++)
                {
                    if(this.list_hidden_col[i]==row[c])
                    {
                        bool_hidden_col=true;
                        break;
                    }
                    else
                    {
                        bool_hidden_col=false;
                    }
                }
                if(bool_hidden_col==true)
                {   
                    del_element.push(t.rows[r].cells[c]);
                }
                else
                {
                    this.list_cell.push(new Cellule(id));
                }
            }
        }
        /****************supprime les colonnes qu'on ne veux pas voir***********************/
        for(var i = 0 ; i < del_element.length ; i++){del_element[i].remove();}
    }

}

ensuite , qui stock les cellules qui sont affiché : 

function Cellule(id)
{
    this.element = $('#'+id);

    this.id = this.element.attr('id');

    this.contenu = this.element.html();
}

et pour finir on instancie Table 

var hidden_col_list=["H","I","J","K"];

table = new Table(e.target.files[0],"excelTable",hidden_col_list);

table.readExcelFileAndConvertToHtml();

console.log(table.list_cellule.length);

mais lorsque je fait le console.log de table.list_cellule.length il m'affiche 0 alors que quand je vais dans la console js de chrome je vois bien
le contenu de ma liste....Ps je ne suis clairement pas un expert en js donc si vous voyez des choses qui vous choque n'hésitez pas à me le faire savoir je suis dans une optique de progression et non que l'on me donne du code tout fait qui n'a aucun interêt, cordialement Julien .

6 réponses

cattleyas10
Auteur
Réponse acceptée

j'ai trouvé d'ou viens le problème! j'ai ajouté une temporisation et le tour est joué ! merci quand même.

cattleyas10
Auteur

Bonjour un peu d'aide s'il vous plaît je sèche complètement j'ai beau me relire je ne vois pas d'ou vient le souci.....:(

Lartak

Bonsoir.
Tu n'as pas l'impression d'avoir un problème entre :

this.list_cell.push(new Cellule(id));

Et :

function Cellule(id)

Dans le premier tu agis comme-ci Cellule est une classe, alors que c'est une fonction et une fonction ça ne s'instancie pas.

cattleyas10
Auteur

Bonsoir effectivement ca peut expliquer tout, du coup je vais t'embêter un petit peu car je suis en train de potasser le js car ce n'est pas du tout ma tasse de thé!! quelle est la différence entre 

function Cellule(id)
{
    this.id = id;
}
Cellule.prototype.get_id = function()
{
    return this.id;
}

et 

class Cellule
{
    constructor(id)
    {
        this.id=id;
     }
     get_id()
     {
        return this.id;
     }
}

parceque le peu de fois ou je jouais avec du js tout était dans un seul et même fichier et je suis en train de comprendre la notion d'objet niveau javascript, si tu pouvais éclairer ma lenterne sur la différence entre les deux ca serais cool ! Je sais je tape ca sur google et j'aurais ma réponse mais je préfère en discuter avec quelqu'un plutôt que de le faire bêtement dans mon coin...^^

cattleyas10
Auteur

j'ai beau avoir effectué le changement je n'arrive toujours pas à récupérer la taille de ma liste :(

cattleyas10
Auteur

Bonjour, la ou je ne comprends pas c'est que dans le main quand je fait ca 

table = new Table(e.target.files[0],"excelTable");

console.log(table.list_cellule);

je vois dans la console de mon navigateur : 

▼[]
        0: "toto"
        1: "toto"
        2: "toto"
        3: "toto"
        4: "toto"
        5: "toto"
        6: "toto"
        7: "toto"
        8: "toto"
        9: "toto"
        10: "toto"
        11: "toto"
        12: "toto"
        13: "toto"
        14: "toto"
        15: "toto"
        16: "toto"
        17: "toto"
        18: "toto"
        19: "toto"
        20: "toto"
        21: "toto"
        22: "toto"
        23: "toto"
        24: "toto"
        25: "toto"
        26: "toto"
        27: "toto"
        28: "toto"
        29: "toto"
        length: 30
►__proto__: Array(0)

mais quand je fait 

console.log(table.list_cellule.length);

ca m'indique 0 !....