How to read .txt file with javascript?

Question

My .txt file Looks like this:

Peter
Joe
Anna
Bob

And i have this Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <head>
  <title>Webdesign-Podcast.de - Auslosung</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- jQuery einbinden -->
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  /* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
  $(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
  $(document).ready(function(){
   /* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
   $('#auslosungstarten').click(function(){
    /* Der Button selbst wird ausgeblendet */
    $(this).hide('slow');
 
    /* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
    intVal = window.setInterval("auslosung()", 300);
    /* Nach 30 Sekunden wird der Gewinner gezogen */
    window.setTimeout("winneris()", 30000);
    /* return false verhindert, dass der href des Links aufgerufen wird */
    return false;
   });
 
   auslosung = function(){
    /* member enthält die Anzahl der Teilnehmer der Verlosung */
    member = $('.member li').length;
    /* 
    Math.random() generiert eine Zufallszahl.
    Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
     */
    randNum = Math.floor(Math.random()*member);
    /* Die CSS Klasse "win" wird von allen li's entfernt und ... */
    $('.member li').removeClass('win');
    /* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
    $('.member li:eq('+randNum+')').addClass('win');
 
    /* Diese Funktion wiederholt sich alle 300 Milisekunden.
    Dadurch entsteht das Muster, dass immer ein anderer Teilnehmer markiert wird.
    */
   }
 
   winneris = function(){
    /* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
    clearInterval(intVal);
    /* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
    winner = $('.member li.win').html();
    /* Der Gewinner wird in der #andthewinneris ausgegeben. */
    $('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<\/strong>');
   }
  });
  </script>
  <style type="text/css">
  /* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
  *{outline:none;padding:0px;margin:0px;}
  body{padding:40px;font:14px "Myriad Pro";color:#333;}
  
  h1{margin-bottom:20px;font-size:26px;font-weight:normal;}
 
  .member{list-style:none;width: 100%;}
  .member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
  .member li.win{background:#fff9d7;border:1px solid #e2c822;}
  
  #auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
  #andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;}
  </style>
 </head>
 <body>
  <h1>Webdesign-Podcast.de Aulosungs-System</h1>
  <!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
  <ul class="member">
   <li>Name 1</li>
   <li>Name 2</li>
   <li>Name 3</li>
   <li>Name 4</li>
  </ul><br clear="all" />
  <!-- Button zum starten der Verlosung -->
  <a href="#" id="auslosungstarten">Auslosung starten...</a>
  <!-- Ausgabe des Gewinners: -->
  <h1 id="andthewinneris"></h1>
 </body>
</html>

can someone explain/show me how i can use the .txt file for the part of the "Name 1" "Name 2" ... "Name n"?

thanks for every help, i just try to learn this ;)

This is a very, very common question... a bit of research gave me this http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div — Jeremy Thille, Feb 10 '15 at 15:47
1. store the txt file in a string; 2. split the string at line break and store the results in an array; 3. Loop through the array and display its values instead of "Name n" — ksbg, Feb 10 '15 at 15:53
ok, can u give me a sample code of how to Display the strings in the

score 0 · Answer 1 · answered Feb 10 '15 at 15:54

You must first open the text file with jquery and store the data in a string. Then you create an array that is storing line by line so you could use them where you want it.

$(document).ready(function() {
$("#button").click(function()
{

     var rawFile = new XMLHttpRequest();
   //Here you are opening your text file
    rawFile.open("GET", "YourTextFile.txt", false);

   ///This is testing if there is no error
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
             //Now you are storing the text
                var allText = rawFile.responseText;
             //Here you are storing every line of text in an Array
                var lines = allText.split("\n");
             /// Now to use any of this names, You use lines[i]
             //// Your code
             }
         }
      }

thank u so much. that helps me ;) how can i use the Array now in the html code? i tried $('#name1').html(lines[0]); then in html: — flori, Feb 10 '15 at 16:14

How to read .txt file with javascript?

1 Answers1