2

Tengo un fichero que contiene una lista de datos, un "array php", y lo que quiero es leerlo con JavaScript para convertirlo en una array JavaScript.

1
  • 1
    a. ¿Has escrito algo de código? Si es así edita tu pregunta y pon las partes de código en las que intentas hacer lo que deseas. b. El fichero que tienes, supongo un .txt, un .csv o un tipo parecido ¿dónde lo tienes y cómo accedes a él? c. El array que obtendrás a partir del fichero, ¿qué uso quieres darle? Pregunto para tener más claridad aunque creo que es una posible pregunta duplicada. - es.stackoverflow.com/questions/19670/… -es.stackoverflow.com/questions/15509/…
    – A. Cedano
    el 18 feb. 2017 a las 13:40

1 respuesta 1

2

Tienes dos opciones:

  1. File API HTML5
  2. Leer el archivo por AJAX

La opción a elegir depende de tu diseño. Si el fichero será compartido por todos los clientes, entonces conviene usar AJAX. Si los ficheros pueden ser personalizados por los propios clientes y luego ser cargados, entonces conviene más usar la File API.


File API

Esta parte de la API tiene una compatibilidad bastante buena (IE10+); lo que hay que hacer es coger el objeto File que representa al archivo seleccionado y posteriormente leerlo como texto mediante FileReader#readAsText.

function readFile(files) {
	let reader = new FileReader();
	let file = files[0];
  
  reader.onloadend = function () {
  	let output = document.getElementById('output');
  	output.textContent = this.result;
  }
  reader.readAsText(file, 'ISO-8859-4');
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


#output {
  border: 3px dashed #777;
  border-radius: 4px;
  display: block;
  line-height: 20px;
  margin-top: 20px;
  padding: 15px;
}

input[type="file"] {
  display: none;
}

input[type="file"] + label {
  background-color: #8e44ad;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-family: 'Open Sans';
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  padding: 0 15px;
}

h3 {
  color: #555;
  font-family: 'Open Sans';
}
<input type="file" id="file" onchange="readFile(this.files)">
<label for="file">Select file</label>
<h3>Contenido</h3>
<code id="output">No content</code>

AJAX

Esta forma es compatible con todo navegador. Solo se necesita hacer una petición a ese archivo y se obtendrá su contenido.

function readFile () {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://raw.githubusercontent.com/Agile-Android-Software-Development/agile-android-software-development-book/master/en/version.txt');
  xhr.setRequestHeader('Accept', 'text/plain');
  xhr.onload = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
      let output = document.getElementById('output');
      output.textContent = this.responseText;
    }
  }
  xhr.send();
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


h3 {
  color: #555;
  display: inline-block;
  font-family: 'Open Sans';
}

button {
  background-color: #8e44ad;
  border: none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Open Sans';
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 15px;
}

#output {
  border: 3px dashed #777;
  border-radius: 4px;
  display: block;
  line-height: 20px;
  margin-top: 20px;
  padding: 15px;
}
<h3>Contenido</h3>
<button onclick="readFile()">Read file</button>
<code id="output">No content</code>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.