1ra opción: Leer archivo en línea

Los archivos en línea se pueden leer a través de métodos AJAX como XHR o fetch . El siguiente código podría ser una solución, pero no funciona para archivos en la computadora. El archivo content.txt debe estar junto al archivo HTML en el servidor.

Más información sobre buscar: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

 <div> <span id="my-element" class="css-1yy09vp" data-font-weight="semibold"></span> <script> let cars = []; const textElement = document.getElementById("my-element"); function carDisplayer() { let i = 0; return function(cars) { let interval = setInterval(() => { if (i < cars.length) { textElement.innerHTML = cars[i]; i++; } else { clearInterval(interval); i = 0; } }, 1000); } } fetch("./content.txt").then(function(response) { response.text().then(function(text) { console.log(text); cars = text.split('\n'); let displayCars = carDisplayer(); displayCars(cars); }); }); </script> </div>

2da opción: Leer desde la computadora del usuario

Leer un archivo desde la computadora del usuario es imposible hasta que el usuario lo permita. En el siguiente código, el usuario debe buscar el archivo content.txt , luego se ejecutará el código.

 Select Text File: <input type="file" id="file-select"> <div> <span id="my-element" class="css-1yy09vp" data-font-weight="semibold"></span> <script> let cars = []; const textElement = document.getElementById("my-element"); function carDisplayer() { let i = 0; return function(cars) { let interval = setInterval(() => { if (i < cars.length) { textElement.innerHTML = cars[i]; i++; } else { clearInterval(interval); i = 0; } }, 1000); } } document.getElementById('file-select').onchange = function() { var reader = new FileReader(); reader.onload = function(progressEvent){ console.log(this.result); cars = this.result.split('\n'); let displayCars = carDisplayer(); displayCars(cars); }; reader.readAsText(this.files[0]); }; </script> </div>

Hay muchas opciones. Lo más fácil es almacenar el JSON como un archivo separado y guardarlo como JS. El archivo se verá como

 var data = [{...}, {...}];

Solo cargará el archivo con <script src="./data.js"></script> .

Si lo almacenará como json, entonces es un poco más difícil y debe obtenerlo con ajax. Lo más fácil es usar fetch(). Obtendrá el archivo, lo analizará y lo guardará.

 fetch('./data.json').then(data => JSON.parse(data)).then(data => callback(data));

Manejar la llamada asíncrona dependerá de usted si desea usar la devolución de llamada en alguna llamada asíncrona o lo que necesite. Esto lo manejará en el navegador. Como parece que no estás haciendo ningún SSR.

Puedes cambiar tu código a algo como esto:

 <script> const textElement = document.getElementById("text"); function carDisplayer() { let i = 0; return function(cars) { let interval = setInterval(() => { if (i < cars.length) { textElement.textContent = cars[i]; i++; } else { clearInterval(interval); i = 0; } }, 10000); } } let displayCars = carDisplayer(); fetch('./data.json').then(data => JSON.parse(data)).then(data => displayCars(data)); </script>

Supongo que estás usando node.js. esto podría ayudarte:

 const readLine = require('readline'); const f = require('fs'); var file = './demo.txt'; var rl = readLine.createInterface({ input : f.createReadStream(file), output : process.stdout, terminal: false }); rl.on('line', function (text) { console.log(text); });

Esquema:

 Line 1 Line 2 Line 3 Line 5