1

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.

4
  • Executar o html? Essa frase ficou estranha... Outro ponto: você está trabalhando com um servidor http de arquivos estáticos? Commented 18/07/2017 às 4:17
  • Nesse comentário você mencionou saber de Java. Por que não usar o Java como serviço para fazer isso então? Assim terá acesso a um servidor de páginas dinâmicas, o que facilitaria sua vida, sem falar que teria a possibilidade de tratarmos dados do jeito que você quiser, seja com .txt, SQLite ou outro jeito de armazenar dados Commented 18/07/2017 às 4:29
  • Executar html eu entendo como "abrir com o navegador". Sim, eu tenho conhecimento em Javascript, porém não muito... Por isso tenho tantas dúvidas. Realizei o treinamento na KhanAcademy e estou tentando me aprimorar. Você poderia me recomendar algum site que contenha um bom treinamento? Ah, eu preciso utilizar o javascript dentro do arquivo html, pois desejo ter toda a programação do site em apenas um arquivo. Obrigado pelo comentãrio.
    – Gymo
    Commented 18/07/2017 às 11:53
  • As lições do codecademy.com são realmente boas vale a pena dar uma olhada Commented 18/07/2017 às 13:06

1 Resposta 1

2

Você podes armazenar as informações em um arquivo json no "servidor estático" e fazer a consulta utilizando a API Fetch que já retorna um resultado parseado de json para um objeto javascript(caso haja o arquivo com sintaxe válida)

Exemplo:

// arquivo json no servidor (test.json)
{
    "fulano": "Chico",
    "Fulana": "Aninha"
}

// buscando os dados
fetch('./test.json').then((response)=>{
    if (response.ok) {
        return response.json(); // aqui retorna parseado para a promise subsequente
    }
    throw new Error('Resposta Invalida'); // aqui lança para o "catch"
}).then((dados)=>{
    // aqui dados já é um objeto javascript de test.json
    console.log(dados.fulano); // imprime: Chico
}).catch((error)=>{
    // trate a exceção ou erro aqui
});

Como podes ver é um exemplo básico más você podes estruturar um banco estático em json melhor do que texto simples uma vez que fetch já converte em objeto você podes percorrer arrays e fazer todas as verificações normalmente.

Como fetch trabalha com Promise caso haja erro sempre cairá em catch.


(edição) um exemplo mais prático:

dados.json

[
    {
        "name": "Danilo",
        "cep": "13057423",
        "casas": [
           "1",
           "200"
        ]
    },
    {
        "name": "Denise",
        "cep": "13059778",
        "casas": [
           "200",
           "500"
        ]
    },
    {
        "name": "Guilherme",
        "cep": "13052445",
        "casas": [
           "500",
           "1000"
        ]
    }
]

index.html

<body>
    <div id="show-users"></div>

    <button id="sur">Mostrar usuários registrados</button>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        // variavel que irá receber a database
        var data;

        // button event
        $('#sur').on('click', function(event){
           event.preventDefault();
           // percorrer a database
           for (let i = 0; i < data.length; i++) {
                // mostrar usuários por nome
                $('#show-users').append('<span>'+data[i].name+'</span>';
           }
        });


        fetch('./dados.json').then((response)=>{
            if (response.ok) {
                return response.json();
            }
        }).then((dados)=>{
            /**
             * manipule o array de dados aqui ou sete uma variável pré-definida
            for (let i = 0; i < dados.length; i++) {
                 // sua lógica aqui
            }
            */
             data = dados; // atribuir para a variável "data"
        }).catch((e)=>{
            console.log(e);
        });
    </script>
</body>
6
  • Obrigado pela resposta. Poderia me indicar um site onde tenha algum tutorial nível intermediário para JavaScrip/automatização de sites?
    – Gymo
    Commented 18/07/2017 às 11:58
  • Não entendi o que se refere a automatização de site? Podes buscar referencia a API Fetch na MDN ou neste blog BrasilJs.org que é bem sucinto Commented 18/07/2017 às 12:08
  • Podes informar onde esta publicando seu site estatico? Se for GitHUb Pages ou GitLab Pages podes usar git para atualizar o banco de dados ou até msmo integrar com um a aplicação Heroku Commented 18/07/2017 às 12:12
  • 1
    Bom, esta "automatização" na verdade é simplesmente a implementação da lógica de programação. Uma vez que ao carregar sua página as interações do usuário (diga-se um click em um botão) deve ser tratado com javascript (like jQuery). Se você usar json podes carregar este database para uma variável assim que a página abrir ( usando fetch) e conforme o usuário "clicar" tratar a ação (recuperar mostrar o resultado desejado) Commented 18/07/2017 às 12:42
  • 1
    Fiz uma atualização no exemplo, básico más é simples se você deseja prover tal interação deves escrever a lógica. Desconheço uma ferramenta, ou framework que faça isso automaticamente. Boa sorte bom estudo! Localmente (por files) realmente é difícil... eu recomendo caso você não tenha (ou não use) um servidor local mais robuste use extensões para navegador ex: para Chrome Commented 18/07/2017 às 12:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .