multiple line string did not read correctly on javascript

Question

I wrote this code which contain a file (string var) that have a multiline string and each line contains many fields separated with tab.. it seems that javascript couldn't separate the lines and the fields >> when i tried to print the field nothing appears

whats wrong ??

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta content="text/html; charset=windows-1252" http-equiv="content-type">
        <script src="Scribl.min.js"></script>

        <script> 
        function draw(canvasName) {  
       // Get Canvas and Create Chart
       var canvas = document.getElementById(canvasName);    

       // Create Chart
       chart = new Scribl(canvas, 500);
    var file = '##gff-version 3 \n'+
'scaffold_1_A_acidus_CBS_106_47   AspGD  gene  61571     62909      .  +    .   ID=Aspfo1_0027407;Note=Protein of unknown function\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   mRNA    61571   62909   .   +   .   ID=Aspfo1_0027407-T;Parent=Aspfo1_0027407;Note=Protein of unknown function\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   exon    61571   61698   .   +   .   ID=Aspfo1_0027407-T-E1;Parent=Aspfo1_0027407-T\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   exon    61801   61858   .   +   .   ID=Aspfo1_0027407-T-E2;Parent=Aspfo1_0027407-T\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   exon    62049   62909   .   +   .   ID=Aspfo1_0027407-T-E3;Parent=Aspfo1_0027407-T\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   CDS 61571   61698   .   +   0   ID=Aspfo1_0027407-P;Parent=Aspfo1_0027407-T;parent_feature_type=ORF\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   CDS 61801   61858   .   +   0   ID=Aspfo1_0027407-P;Parent=Aspfo1_0027407-T;parent_feature_type=ORF\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   CDS 62049   62909   .   +   2   ID=Aspfo1_0027407-P;Parent=Aspfo1_0027407-T;parent_feature_type=ORF\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   gene    192322  193023  .   -   .   ID=Aspfo1_0027447;Note=Protein of unknown function\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   mRNA    192322  193023  .   -   .   ID=Aspfo1_0027447-T;Parent=Aspfo1_0027447;Note=Protein of unknown function\n';


    document.getElementById("demo").innerHTML=file;

          //gff3(file,chart);

            var lines = file.split("\n");  // array has the file lines, each lin has a feature >> we can pars each line now to extraxt the needed info
        var features = [];
        var max = undefined;
        var min = undefined;
        var version = undefined;

        // parse genes
        numFeatures = lines.length
        for( var j=0; j < numFeatures; j++ ) {
                if( lines[j] == "" ) break;
                if( lines[j] == "##" ) continue;
                // if it start of ## means extra info that provide meta-information about the document as a whole doc such as version //pragmas or meta-data


                var fields = lines[j].split("   ");//tab-delimited : parsers must split on tabs, not spaces. 
                //Fields are: <seqname/id> <source> <feature/type> <start> <end> <score> <strand> <frame> [attributes] [comments]

                if( fields[2] != "gene" ) continue;
                if (type == "gene"){// it is gene so draw it // else it is exone itron etc

                    var seqid = fields[0];
                    var source = fields[1];
                    var type = fields[2];
                    var start = parseInt(fields[3]);
                    var end = parseInt(fields[4]);
                    var score = fields[5];
                    var strand = fields[6];
                    var phase = fields[7];

                    var attributes = fields[8].split(";");
                    var geneID = attributes[0];
                    var GeneNama = attributes[1];

            chart.addGene( start , end, strand);
                    }

        }

       // Draw Chart
       chart.draw();

       // Create image of chart1
       var img = chart.canvas.toDataURL("image/png");
       // Add link to download image
          //document.getElementById('export').href = img;
    }

           </script>
        </head>

      <body onload="draw('canvas')"> <canvas id="canvas" width="750" height="330"></canvas>
        <p id="demo">hi</p>

      </body>
    </html>

Niet the Dark Absol · Accepted Answer · 2014-02-19 00:24:54Z

1

Whitespace collapses. But add this CSS:

#demo {white-space:pre-wrap}

And MAGIC! :D

answered Feb 19, 2014 at 0:24

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nada Over a year ago

where to add it >> Iam new in javascript world.

OneOfOne · Accepted Answer · 2014-02-19 00:27:01Z

0

These aren't tabs, however changing var fields = lines[j].split(" "); to var fields = lines[j].split(/\s+/); should do the trick.

answered Feb 19, 2014 at 0:27

OneOfOne

100k22 gold badges195 silver badges187 bronze badges

1 Comment

Nada Over a year ago

it works by adding your edit ;) I also change the array index to start with 1 .. I am surprised that index 0 does not working

Collectives™ on Stack Overflow

multiple line string did not read correctly on javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related