Display a text file into html table

Question

I have a text file and I want to parse it and keep the results as a HTML table in my page.

Each line in the text file is tab separated which has the value of different features. I want to parse each line, then split by tab and save each line as a Javascript object.so for each line one object is saved, so I would have an array of objects.

Then I want to show that array of objects into a table in the html page. Here is my attempt but it does not show anything! I'm not getting any error! In function yolla() I'm reading my text file.I defined the object by function library_object() . and I read each line of the text file and split the line by tab and then save that into an object. then each line will be an object in var lib_info = new Array() .

Actually, I do not know how to display that lib_info[] array into a table.

<div id="Summary">
    <p>In this page a summary of all available libraries in the HBase is shown! </p>
    <script type="text/javascript">
        var lib;
        var lib_info = new Array();

        if(navigator.appName.search('Microsoft')>-1) { 
            lib = new ActiveXObject('MSXML2.XMLHTTP'); 
        } else { 
            lib = new XMLHttpRequest(); 
        }

        function yolla() {
            lib.open('get', 'library.txt', true);
            lib.onreadystatechange= cevap;
            lib.send(null);
        }

        function cevap(){
            if(lib.readyState==4) {
                libArray = lib.responseText.split("\n");
                extract_libs(libArray);
            }
        }

        function extract_libs(libArray){
            var ORACLE_LIB_ID;
            var COMMON_NAME;
            var SCIENTIFIC_NAME;
            var GENETIC_BACKGROUND;
            var TISSUE;
            var DEV_STAGE;
            var TREATMENT;
            var ECTOPIC_ID;
            var ECTOPIC_TYPE;
            var EVENT_ID;
            var REPLICATE_NUMBER;
            var EXPERIMENT_DESC;
            var ADAPTOR_5;
            var ADAPTOR_3;
            var DATE_SENT;
            var DATE_RETURN;
            var LIB_NAME;
            var QC_NOTE;
            var SEQUENCER;
            for (i=0; i<libArray.length; i++){
                lib_tag = libArray[i].split("\t");
                for(j=0;j<lib_tag.length;j++){
                    switch(j){
                        case 0:
                            ORACLE_LIB_ID = lib_tag[0];
                        break;
                        case 1:
                            COMMON_NAME = lib_tag[1];
                        break;
                        case 2:
                            SCIENTIFIC_NAME = lib_tag[2];
                        break;
                        case 3:
                            GENETIC_BACKGROUND = lib_tag[3];
                        break;
                        case 4:
                            TISSUE = lib_tag[4];
                        break;
                        case 5:
                            DEV_STAGE = lib_tag[5];
                        break;
                        case 6:
                            TREATMENT = lib_tag[6];
                        break;
                        case 7:
                            ECTOPIC_ID = lib_tag[7];
                        break;
                        case 8:
                            ECTOPIC_TYPE = lib_tag[8];
                        break;
                        case 9:
                            EVENT_ID = lib_tag[9];
                        break;
                        case 10:
                            REPLICATE_NUMBER = lib_tag[10];
                        break;
                        case 11:
                            EXPERIMENT_DESC = lib_tag[11];
                        break;
                        case 12:
                            ADAPTOR_5 = lib_tag[12];
                        break;
                        case 13:
                            ADAPTOR_3 = lib_tag[13];
                        break;
                        case 14:
                            DATE_SENT = lib_tag[14];
                        break;
                        case 15:
                            DATE_RETURN = lib_tag[15];
                        break;
                        case 16:
                            LIB_NAME = lib_tag[16];
                        break;
                        case 17:
                            QC_NOTE = lib_tag[17];
                        break;
                        case 18:
                            SEQUENCER = lib_tag[18];
                        break;
                    }
                }

                lib_info[i] = new library_object(ORACLE_LIB_ID, COMMON_NAME, SCIENTIFIC_NAME, GENETIC_BACKGROUND, TISSUE, DEV_STAGE, TREATMENT, ECTOPIC_ID, ECTOPIC_TYPE, EVENT_ID, REPLICATE_NUMBER, EXPERIMENT_DESC, ADAPTOR_5, ADAPTOR_3, DATE_SENT, DATE_RETURN, LIB_NAME, QC_NOTE, SEQUENCER);
            }                           
        }
        function library_object(ORACLE_LIB_ID, COMMON_NAME, SCIENTIFIC_NAME, GENETIC_BACKGROUND, TISSUE, DEV_STAGE, TREATMENT, ECTOPIC_ID, ECTOPIC_TYPE, EVENT_ID, REPLICATE_NUMBER, EXPERIMENT_DESC, ADAPTOR_5, ADAPTOR_3, DATE_SENT, DATE_RETURN, LIB_NAME, QC_NOTE, SEQUENCER){
            this.libID = ORACLE_LIB_ID;
            this.ComName = COMMON_NAME;
            this.ScnName = SCIENTIFIC_NAME;
            this.background = GENETIC_BACKGROUND;
            this.tissue = TISSUE;
            this.devStage = DEV_STAGE;
            this.treatment = TREATMENT;
            this.ectopic = ECTOPIC_ID;
            this.ectType = ECTOPIC_TYPE;
            this.eventID = EVENT_ID;
            this.ReplicateNum = REPLICATE_NUMBER;
            this.ExpDesc = EXPERIMENT_DESC;
            this.adaptor5 = ADAPTOR_5;
            this.adaptor3 = ADAPTOR_3;
            this.dateSent = DATE_SENT;
            this.dateReturn = DATE_RETURN;
            this.libName = LIB_NAME;
            this.QcNote = QC_NOTE;
            this.sequencer = SEQUENCER;
        }                
    </script>
    <input type="button" value="show library" onclick="yolla()">
    <table>
        <tr>
            <th>Library ID</th>
            <th>Common Name</th>
            <th>Tissue</th>
            <th>BackGround</th>
        </tr>
        <script>
            for (i=0; i<lib_info.length; i++){
                document.write('<tr><td>' + lib_info[i].libID + '</td><td>'+ lib_info[i].ComName + '</td><td>' + lib_info[i].tissue + '</td><td>' + lib_info[i].background + '</td></tr>');
            }
        </script>
    </table>
    <div id="library"></div>
</div>

Can anybody tell me what is missing?

Answer 1

XMLHttpRequest are asynchronous, so when you try to loop the length of your array is probably 0.

you could try to write your HTML fragment in a text variable and then insert that in a div element

function cevap() {
    if(lib.readyState==4) {
        libArray = lib.responseText.split("\n");
        extract_libs(libArray);
        createTable() // <--------
    }
}

function createTable() {
    var table = '<table><tr><th>Library ID</th><th>Common Name</th>' +
                '<th>Tissue</th><th>BackGround</th></tr>';

    for (i=0; i<lib_info.length; i++){
        table += '<tr><td>' + lib_info[i].libID + '</td><td>' +
           lib_info[i].ComName + '</td><td>' + lib_info[i].tissue + '</td><td>' + 
           lib_info[i].background + '</td></tr>';
    }
    table += '</table>';
    document.getElementById('myCoolElement').innerHTML = table;
}