Preciso que o browser me retorne informações pre-cadastradas de pessoas e seus endereços, onde cada uma tem duas casas na mesma rua.
Para isso, simulei um servidor na minha pasta do pc, e assim criei um arquivo dados.txt no mesmo diretório de um arquivo .html.
No arquivo dados.txt escrevi os seguintes dados, para ser utilizado pelo sistema como um banco de dados:
[item]|1|Danilo|13057423|1|200| [item]|2|Denise|13059778|200|500| [item]|3|Guilherme|13052445|500|1000|
Nestes dados, estou tentando fazer com que o sistema reconheça que o Danilo tem duas casas no CEP 13057423, de número 1 e 200. E a Denise da mesma forma, e assim por diante.
Sendo assim, pesquisei como fazer com que o sistema leia essas informações e me retorne os dados automaticamente, porém só encontrei um modo onde eu teria que, toda vez que precisar dos dados, ter que fazer o upload da file, como pode ver no código que segue:
<html>
<body>
<head>
<title>Listando itens de arquivo TXT |</title>
</head>
<style type="text/css">
#lista{
width:50%;
border: 1px solid black;
}
</style>
<table>
<tr>
<div>Escolha um arquivo de texto para carregar:</div>
<div><input type="file" id="fileToLoad"></div>
<div><button onClick="loadFileAsText()">Carregar o arquivo selecionado</button><div>
</tr>
</table>
<table id="lista" border="1">
<tr>
<div>Nome</div>
<div>CEP</div>
<div>número da casa</div>
<div>número da casa 2</div>
</tr>
</table>
<script type='text/javascript'>
function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
var texto = textFromFileLoaded;
listar(texto);
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
function listar(texto){
var quantidade = document.getElementById("lista").rows.length;
if (quantidade>1){
for(var cont=1;cont<=quantidade;cont++){
document.getElementById("lista").deleteRow(cont);
}
}
var itens = texto.split('[item]');
for(var i=1;i<itens.length;i++){
var valores = itens[i].split("|");
document.getElementById("lista").innerHTML +='<tr><div>'+valores[1]+'</div><div>'+valores[2]+'</div><div>'+valores[3]+'</div><div>'+valores[4]+'</div></tr>';
}
}
</script>
</body>
</html>
Agora, o meu objetivo é fazer com que o sistema faça o load do arquivo automaticamente, sem que eu tenha que "fazer upload" dele todas as vezes que eu precisar que o sistema me retorne as informações no browser.
Pesquisei bastante, e consegui encontrar algumas informações de como fazer isso. Realizei as mudanças no código e ficou da seguinte forma:
<html>
<body>
<head>
<title>Listando itens de arquivo TXT |</title>
</head>
<style type="text/css">
#lista{
width:50%;
border: 1px solid black;
}
</style>
<table>
<tr>
<iframe id="fileToLoad" src="dados.txt" style="display: none;"></iframe>
<div><button onClick="loadFileAsText()">Mostrar as informações de Nome, CEP, número da casa 1 e 2</button><div>
</tr>
</table>
<table id="lista" border="1">
<tr>
<div>Nome</div>
<div>CEP</div>
<div>número da casa</div>
<div>número da casa 2</div>
</tr>
</table>
<script type='text/javascript'>
function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
var texto = textFromFileLoaded;
listar(texto);
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
function listar(texto){
var quantidade = document.getElementById("lista").rows.length;
if (quantidade>1){
for(var cont=1;cont<=quantidade;cont++){
document.getElementById("lista").deleteRow(cont);
}
}
var itens = texto.split('[item]');
for(var i=1;i<itens.length;i++){
var valores = itens[i].split("|");
document.getElementById("lista").innerHTML +='<tr><div>'+valores[1]+'</div><div>'+valores[2]+'</div><div>'+valores[3]+'</div><div>'+valores[4]+'</div></tr>';
}
}
</script>
</body>
</html>
Percebam que o Chrome tem um sistema de segurança que não permite a leitura de files em diretório físico, portanto utilizei o Firefox para os testes de simulação.
Não estou conseguindo de nenhuma forma que o navegador mostre as informações sem que eu tenha que fazer upload da file (estava assim antes de eu realizar as modificações no código).
Alguém pode me ajudar ou me direcionar para algum link que me ajude a realizar essa tarefa relativamente simples? Já tentei debugar de todas as formas que conheço, inspecionando pelo chrome, verificando os erros de console, e o que mostra é sempre a mesma mensagem de erro, que podem ver clicando em "executar" logo aqui em cima.
Gostaria muito de conseguir realizar isto utilizando o Javascript (sem utilizar jQuery/Ajax).
Qualquer sugestão de como melhorar minha pergunta e minha pesquisa é sempre bem-vinda.
Muito obrigado.
.txt
,SQLite
ou outro jeito de armazenar dados