CODEWITHSUNDEEP
javascripthtmlarraysfile-iolocal
user3015565
user3015565

Reputation: 413

Parse a text file into an array?

I currently have 3 files; they are in the same directory on my computer:

Code in 'project.html'

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="javascript.js">
    </script>
    <script
        //calling the Google Maps API
    </script>

    <script>
        //code to initialize Google Maps
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button onclick="get_parameters()">Try It</button>
        </div>
    </div>
</body>
</html>

Code in 'javascript.js'

function get_parameters() {
    alert('hi');
    var xhr = new XMLHttpRequest();

    xhr.addEventListener('readystatechange', (output) => {
      if (xhr.readyState === 4) {
        var response = xhr.responseText;
        callback(response);
      }
    });

    xhr.open('GET', 'text.txt', true);
    xhr.send();
}

Text in 'text.txt'

etc... (close to 150 lines)

At the end of everything, I would like to parse 'text.txt' into an array and use that array to create an option menu with the array's content. I have posted a question asking whether I can parse the file using JavaScript and the answer was no due to security issues. The JavaScript code is what I have tried but has not worked. That said, is there another language I can use to read the file and create the option menu?

I would eventually like to have something like this (below) in the 'project.html' file:

<select>
    <option value="1">Line 1 of File</option>
    <option value="2">Line 2 of File</option>
    <option value="3">Line 3 of File</option>
        <!-- etc... -->
</select>

Some things to keep in mind:

Upvotes: 4

Views: 20665

Answers (3)

Kilian Hertel
Kilian Hertel

Reputation: 237

or vanilla:

function get_parameters() {
alert('hi');
var xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', (output) => {
  if (xhr.readyState === 4) {
    var response = xhr.responseText;
    var lines = response.split('\n');
    var i = 0;
    var select = document.createElement('select');
    do
    {
      var option = document.createElement('option');
      option.value = i;
      option.text = lines[i];
      select.appendChild(option);
      i++;
    }while(i<lines.length);
    document.body.appendChild(select);
  }
});

xhr.open('GET', 'text.txt', true);
xhr.send();
}

Upvotes: 0

Domenico De Felice
Domenico De Felice

Reputation: 465

If you have no web server, you can't do standard XHR requests: XHR requests involve performing HTTP requests towards a web server, that you don't have.

From the XMLHttpRequest specification:

some implementations support protocols in addition to HTTP and HTTPS, but that functionality is not covered by this specification

Therefore some browsers supports the file protocol by automatically converting XHR requests to "normal" file loads, but what you need to do to make it work can vary from browser to browser and I discourage you to follow that path.

The best solution is to use a lightweight web server and distribute it with your application.

Once you can do AJAX requests to your web server, retrieve the file contents and obtain the array of lines using split. I'm assuming that from this point on you know how to iterate over the array and modify the DOM consequently.

You mentioned to be in a hurry for this project. Probably you could include jQuery in your application to make your life easier.

Upvotes: 0

Danny
Danny

Reputation: 7518

If you can tweak browser settings there is no reason why you can't do this with just javascript. Below is an example using jQuery, you could convert it to plain Javascript but that would take a lot more code.

$(document).ready(function() {
    //fetch text file
    $.get('text.txt', function(data) {
        //split on new lines
        var lines = data.split('\n');
        //create select
        var dropdown = $('<select>');
        //iterate over lines of file and create a option element
        for(var i=0;i<lines.length;i++) {
            //create option
            var el = $('<option value="'+i+'">'+lines[i]+'</option>');
            //append option to select
            $(dropdown).append(el);
        }
        //append select to page
        $('body').append(dropdown);
    });
});

It worked fine on IE10 with just a dialog asking if I wanted blocked content to run. Other browsers may or maynot need other security settings played with to get it to work.

Upvotes: 1

Related Questions