Is it possible to read a .txt file in JavaScript?

Question

Is it possible to read a .txt file in JavaScript?

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

If it is possible, how would you do it? I have a file called version.txt , and I need JavaScript to read it and display its content on the screen. Does anyone have any idea how I would do this? PS: please I would like a code without using json functions.

javascript html

asked by anonymous 13.10.2017 / 21:12

2 answers

I'm trying to test a game but every time I try to run it appears "invalid syntax" How to insert thumbnail into .MP3 file

score 2 · Answer 1

I think with a simple XMLHttpRequest this is possible. Remember that server requests are asynchronous, so they are not executed in the order that you read the code. So we always provide callbacks for them, which is the code we want to execute when that request comes back from the server.

//esta variável é um array de arrays. Cada posição do array
// é um array de duas posições. a primeira é uma URL, e a segunda um callback
var urls = [
  ['https://jsonplaceholder.typicode.com/posts/1', mostrarNaTela],
  ['https://jsonplaceholder.typicode.com/posts/2', logarNoConsole],
  ['https://jsonplaceholder.typicode.com/posts/3', escreverNaTela]
]

// #### estes são os callbacks. Eles também podem ser funções anônimas, mas para evitar o callback hell, prefiro assim
function mostrarNaTela(conteudo){ alert(conteudo); }
function logarNoConsole(conteudo) { console.log(conteudo); }
function escreverNaTela(conteudo) { document.write(conteudo); }
// #### fim dos callbacks

// esta função destrincha o array na posição pedida, pegando o callback e a url
function fazerRequest(url){
// variável dados é um array de duas posições
  var dados = urls[url];
  //uri é a url aonde farei a requisição
  var uri = dados[0];
  //callback é a função que será executada na volta da requisição
  var callback = dados[1];
  lerArquivo(uri, callback);
}

function lerArquivo(nome, callback)
{
    var req = new XMLHttpRequest();
    req.open("GET", nome, false);
    req.onreadystatechange = function ()
    {
        if(req.readyState === 4)
        {
            //verifica se a requisição foi bem sucedida
            if(req.status === 200 || req.status == 0)
            {
                callback(req.responseText);
            }
        }
    }
    req.send(null);
}

<button id="acao1" onclick="fazerRequest(0)">Mostrar na tela</button>
<button id="acao2" onclick="fazerRequest(1)">Mostrar no console</button>
<button id="acao3" onclick="fazerRequest(2)">Mostrar no HTML</button>

score 0 · Answer 2

Although XMLHttpRequest is supported by the widest range of browsers I would recommend using the API Fetch she works on XMLHttpRequest and is more recent breaking away from heavy work.

How this API uses Promise is easier to handle errors and exceptions.

A basic example:

var request = function(url) {

    fetch(url, {
        cache: 'reload' // definir o tipo de cache
    }).then(function(response) {
        if ( response.ok ) {
            // texto simples
            return response.text();
            // para transformar o 'json' que é 'string' para um 'object'
            // javascript use 'response.json()' que o próximo 'then' retornará um 'object'
        }
        // em caso de resposta "opaca" ou outros erros
        throw new Error('Fetch error, status code: ' + response.status);
    }).then(function(text) {
        // buscar elemento (div)
        var el = document.getElementById('container');
        // adicionar resultado (objeto para string)
        el.innerHTML = el.innerHTML += '<br>' + text;
    }).catch(function(error) {
        // caso haja um erro... tratar aqui
    });

};

<button type="button" onclick="request('https://jsonplaceholder.typicode.com/posts/1');">adicionar ao elemento (div)</button>


<div id="container">Resultado:</div>

The current support for Fetch API : (source: caniuse.com )