0

I'm writing a webpage where you can upload text files and then do some analysis on the file.

the text file is formatted like this:

  • 0 1 475
  • 1 2 437
  • 2 3 553
  • 3 4 500
  • 4 5 612
  • 5 6 491
  • 6 7 444
  • 7 8 544
  • 8 9 491
  • 9 10 595

'*' is only used to make a list on stack-overflow not actually in the text file

I only need to extract the third column(three digits) and place the values in a variable that I can later use for my analysis.

How can I do this? I can't seem to find an answer with the javascript.

thanks

2
  • 2
    What are you having problems with ? Accessing the file's content ? Processing the file's content ? Commented Nov 19, 2020 at 6:42
  • @Titus so basically I have created a drag-drop component and now when I upload the files I would like to process them as highlighted above. For example, after the file has uploaded, at the event of a button click, it can process the values of the file and store it into a variable and then later i can use these values for some computation. So what i need help with is processing. Commented Nov 19, 2020 at 7:39

3 Answers 3

1

Here is a way of doing it:

document.querySelector('#fileInput').addEventListener('change', (e) => {
  readFile(e.target.files[0]);
});

function readFile(file) {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function() {
    const values = reader.result.split('\n').map(line => (+line.split(' ')[2]));
    console.log(values);
  };
}

const fileContent = `0 1 475
1 2 437
2 3 553
3 4 500
4 5 612
5 6 491
6 7 444
7 8 544
8 9 491
9 10 595`;

const blob = new Blob([fileContent], {type: 'text/plain'});
readFile(blob);
<input id="fileInput" type="file" onchange="readFile(this.files[0])">

In this example I've used a Blob to imitate a file but you can also use the <input type="file" /> to test the function with a real file.

What this does is to use a FileReader to read a file as text and then parse the content of the file by creating an array that has each line of text in the file as an element (reader.result.split('\n')) and then mapping that array to only keep the last number. That is achieved by splitting the line on every white space character and converting to a number and keeping only the third element from the resulting array (+line.split(' ')[2], the [2] selects the third element and + converts that element to a number).

Sign up to request clarification or add additional context in comments.

Comments

0

You could do something like this, where the map function transforms each string into an integer:

const input = ["0 1 475",
               "1 2 437",
               "2 3 553",
               "3 4 500",
               "4 5 612",
               "5 6 491",
               "6 7 444",
               "7 8 544",
               "8 9 491",
               "9 10 595"];
const output = input.map((str) => parseInt(str.split(" ")[2]))
console.log(output);

1 Comment

Thank you for answering! But the problem is that the file values change every time a new file is uploaded so having constant values wouldn't work well. Is there another way to get over this issue?
0

You can use regular expression:

   let str= `0 1 475
1 2 437
2 3 553
3 4 500
4 5 612
5 6 491
6 7 444
7 8 544
8 9 491
9 10 595`

let re=/\d{3}$/gm

console.log(str.match(re))

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.