File reader for an HTML/CSS/JS Program

General question here: Student has a large array and it’s slow to read in Replit on our network.

I’m thinking a .txt or .csv file could be read with a fileRead library, and remember someone sharing a pared-down library like that in a summer training, but those team files are not accessible anymore.

Can anyone recommend a library to use? No node, just local .js?

If you just want to read from a text file in the Repl, you can use the Fetch API:

fetch("/path/to/file.extension").then((res) => res.text()).then((fileContents) => console.log(fileContents));

Thank you, Matt! Can I read in chunks? If it were a CSV, can I say “find the 112th piece separated by commas” without it having to read and parse the entire file?

What so you mean read without parsing, first of all I don’t think this is possible second of all, unless you have a really large csv file, can’t you just use fileContents.split(",")?

As @019482 stated, reading a file in chunks with JavaScript is not possible. A very simple way you could read and organise the text in a CSV file would be like this:

example.csv:

firstname,lastname,age
John,Doe,30
Some,Person,20
A,Student,14
Another,Person,50

scripts.js:

function parseCSV(text) {
	text = text.split("\n");
	const data = {};
	data.headers = text[0].split(",");
	data.lines = [];
	for (const header of data.headers) {
		data[header] = [];
	}
	for (let i = 1; i < text.length; i++) {
		const row = text[i].split(",");
		data.lines.push(row);
		for (let j = 0; j < row.length; j++) {
			data[data.headers[j]].push(row[j]);
		}
	}
	return data;
}
fetch("./example.csv").then((res) => res.text()).then((fileContents) => console.log(readCSV(fileContents)));

console (order will likely actually be alphabetical in most browsers):

{
	headers: ['firstname', 'lastname', 'age'],
	lines: [
		['John', 'Doe', '30'],
		['Some', 'Person', '20'],
		['A', 'Student', '14'],
		['Another', 'Person', '50']
	],
	firstname: ['John', 'Some', 'A', 'Another'],
	lastname: ['Doe', 'Person', 'Student', 'Person'],
	age: ['30', '20', '14', '50']
}
3 Likes

Thank you so much, folks. I just remembered (it’s been a while and I’m old) the name of the Java class that does what I imagined: BufferedReader (with the readLine method). And I see that there is no JavaScript analog readline, only Node.js.

I might have been too hasty in accepting my student’s report that the Replit loaded very slowly because of adding text data parsed in a big array. Maybe we need to explore that more. I don’t have a model in my head now for why parsing a CSV file into an array would speed things up – if anything, it should slow them down (the array is already parsed).

But we’ll implement @MattDESTROYER 's solution and see how long it takes with the large CSV. That way we can isolate and troubleshoot.

I wish I knew more … this might be a rabbit hole. But I’m a teacher / technologist, not a programmer, so it’s blind leading the blind. We’ll learn what we can!

Again, thank you both.

2 Likes

It was a glitch yesterday - happened at the end of class, so didn’t have time to test/investigate. No idea what it was, but we did the array solution again today and there was no latency. Nice little rabbit hole - but good that other folks now have access to @MattDESTROYER’s solution.

3 Likes