2014-01-12 2 views
4

В настоящее время у меня есть 3 файла; они находятся в той же директории на моем компьютере:Разбор текстового файла в массив?

  • project.html
  • javascript.js
  • text.txt

код в '' 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> 

Код в '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.txt'

  • Железо
  • Алюминий
  • стали

и т.д ... (близко к 150 строк)

В конце из всего, я хотел бы проанализировать «text.txt» в массив и использовать этот массив для создания меню опций с содержимым массива. Я задал вопрос, могу ли я проанализировать файл с помощью JavaScript, и ответ был не связан с проблемами безопасности. Код JavaScript - это то, что я пробовал, но не работал. Тем не менее, есть ли другой язык, который я могу использовать для чтения файла и создания меню опций?

В конце концов я хотел бы иметь что-то вроде этого (ниже) в файле «project.html»:

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

Некоторые вещи, чтобы иметь в виду:

  • Все файлы не на сервере, но скорее работает с моего компьютера (так что я предполагаю, что языки с размером сервера, такие как PHP, не являются опцией)
  • Я хотел бы автоматически создать меню опций на основе содержимого в ' text.txt '
  • Файлы находятся в том же каталоге
  • Я бы не хотел, чтобы у пользователя был возможность выбрать файл для чтения. «text.txt» - это файл, созданный и заполненный другой программой, которую я создал и, скорее всего, изменится; поэтому я хочу читать файл каждый раз, когда страница загружается.
+1

FYI, если ваша страница работает под 'файла: //' протокол, а не 'HTTP: //', ваш запрос AJAX вполне может не работать из-за яваскрипт песочницы безопасности. Если у вас нет сервера, попробуйте MAMP или WAMP (бесплатно, я полагаю), чтобы настроить локальный веб-стек. –

+0

Какие ошибки вы получаете? – Markasoftware

+0

Непонятно, что вы просите. Вам нужна помощь в [split] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) ответе в массив? – bfavaretto

ответ

1

Если вы можете настроить настройки браузера, нет причин, по которым вы не можете сделать это только с помощью javascript. Ниже приведен пример использования jQuery, вы можете преобразовать его в обычный Javascript, но для этого потребуется намного больше кода.

$(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); 
    }); 
}); 

Он отлично работал на IE10 с помощью всего лишь диалога, спрашивающего, хочу ли я заблокировать содержимое для запуска. Другие браузеры могут или не нуждаются в других настройках безопасности, с которыми можно работать, чтобы заставить их работать.

0

Если у вас нет веб-сервера, вы не можете выполнять стандартные запросы XHR: запросы XHR включают выполнение HTTP-запросов к веб-серверу, которого у вас нет.

Из XMLHttpRequest specification:

некоторых протоколов поддержки реализации в дополнение к HTTP и HTTPS, но функциональные возможности не рассматриваются в данной спецификации

Поэтому некоторые браузеры поддерживает протокол file путем автоматического преобразования XHR запрашивает «нормальные» загрузки файлов, но то, что вам нужно сделать, чтобы заставить его работать, может варьироваться от браузера к браузеру, и я препятствую вам следовать этому пути.

Лучшим решением является использование облегченного веб-сервера и распространение его с вашим приложением.

Как только вы можете выполнить запросы AJAX на свой веб-сервер, получить содержимое файла и получить массив строк, используя split. Я предполагаю, что с этого момента вы знаете, как перебирать массив и модифицировать DOM.

Вы упомянули о спешке для этого проекта. Вероятно, вы могли бы включить jQuery в свое приложение, чтобы сделать вашу жизнь проще.

+0

Я только что заметил, сколько лет вопрос. :-) Надеюсь, это может помочь кому-то другому. –

0

или ваниль:

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(); 
} 
Смежные вопросы