4

I am trying to convert a .txt deocument into an array.

The document has names in it and is structured like this:

Name1
Name2
Name3

The program has to read the lines and the output should be

["Name1","Name2","Name3"].

I have looked all over the internet, but most solutions just involve node.js, which i cannot install on the computer I need the software on, or some complex xmlhttp code I do not understand. I am just looking for a simple solution.

Can anybody help?

PhDaher
  • 41
  • 1
  • 2
  • It's not clear what you're asking. You'll need _some_ mechanism to read the file. What it is depends on your server setup and your preferences. – isherwood Aug 23 '21 at 18:36
  • 1
    You can't use node, so where are you running the javascript? A browser? – Nick Aug 23 '21 at 18:36
  • 1
    Or is this just something you'll run locally? Please see [ask] and provide more information. – isherwood Aug 23 '21 at 18:38

3 Answers3

3

You could create an <input type="file"> for opening a file from your computer, read it with a FileReader and split() the result by newline (with for example regex /\r?\n/) to become an array of words.

const openFile = (e) => {
  const reader = new FileReader(); // filereader
  reader.readAsText(e.target.files[0]); // read as text
  reader.onload = () => {
    const text = reader.result;
    const result = text.split(/\r?\n/); // split on every new line
    console.log(result); // do something with array
  };
};
<input type='file' accept='text/plain' onchange='openFile(event)'>

You can try it out in this fiddle.

You could also accomplish this in another (newer) way as suggested in the comments, using .then.

const openFile = (e) => {
  e.target.files[0].text().then((t) => {
    const outcome = t.split(/\r?\n/);
    console.log(outcome);
  });
};
<input type='file' accept='text/plain' onchange='openFile(event)'>
axtck
  • 3,707
  • 2
  • 10
  • 26
  • A newer approach could be to do: `e.target.files[0].text().then(...)` and skip the hole FileReader, then you may use async/await if you want to – Endless Aug 23 '21 at 21:23
  • @Endless I didn't know about this, thank you for suggesting, I added it in. – axtck Aug 23 '21 at 21:38
  • 2
    fyi, you also got `file.arrayBuffer()` and `file.stream()` need json? `new Response(file).json()` – Endless Aug 23 '21 at 21:41
2

To fetch the file contents you can use the fetch API in js which is pretty simple ( just pass the file url inside as parameter ) and clean to use .. Moreover to solve your issue regarding converting the text extracted from the file into an array you can use string.split method !

async function getFile(fileURL){
    let fileContent = await fetch(fileURL);
    fileContent = await  fileContent.text();
    return fileContent;
}

// Passing file url 
getFile('file.txt').then(content =>{
   // Using split method and passing "\n" as parameter for splitting
   let array =  content.trim().split("\n");
   console.log(array);
}).catch(error =>{
    console.log(error);
});

After getting text you can use string.split method and when used with .trim() method will remove extra spaces too !

Read MDN docs for information about fetch API

Sanmeet
  • 1,191
  • 1
  • 7
  • 15
2

Since you won't use node, I am assuming you're running your code on a browser. And the file from an <input type="file"/>

<html>
  <input type="file" id="inputFile">

  <script>
   const inputFile = document.querySelector('#inputFile');

   inputFile.addEventListener('change', () => {
     const fileReader = new FileReader();
     fileReader.onload = e => {
       const array = e.target.result.split('\n');
       console.log(array);
     };
     fileReader.readAsText(inputFile.files[0], 'UTF-8');
   });
  </script>
</html>
Derick Felix
  • 151
  • 10