0

テキスト ファイルがあり、それを解析して結果を HTML テーブルとしてページに保持したいと考えています。

テキスト ファイルの各行はタブで区切られており、さまざまな機能の値があります。各行を解析し、タブで分割し、各行をJavascriptオブジェクトとして保存したいので、各行に1つのオブジェクトが保存されるため、オブジェクトの配列が得られます。

次に、そのオブジェクトの配列を html ページのテーブルに表示したいと思います。ここに私の試みがありますが、何も表示されません! エラーが発生しません!関数yolla()では、テキスト ファイルを読み込んでいます。関数でオブジェクトを定義しましたlibrary_object()。テキスト ファイルの各行を読み取り、その行をタブで分割して、それをオブジェクトに保存します。各行は のオブジェクトになりますvar lib_info = new Array()

lib_info[]実は、その配列を表に表示する方法がわかりません。

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

何が欠けているのか誰か教えてもらえますか?

4

1 に答える 1

0

XMLHttpRequestは非同期であるため、ループしようとすると、配列の長さはおそらく0になります。

HTMLフラグメントをテキスト変数に書き込んでから、それをdiv要素に挿入することができます。

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;
}
于 2012-10-24T15:38:24.003 に答える