Javascript (html): How to search a string in local file (like .csv, .txt, etc)

Question

I would like to search and show a data from a local file like csv or txt in my html. Ex. open and read "file.cvs" = (1;a bc;2;def;3;gh i). If I input value "1", a text "a bc" will be shown.

<html>

<head><meta charset="UTF-8"></head>

<body onload="form1.reset();">

    <form id="form1">
      <fieldset>
      <label for="code">Code:</label>
      <input type="text" id="code" maxlength="6" required="">
      <p id="output">Text will be shown here!<p/>
      <input type="button" id="button" value="Ok">
      </form>
      </fieldset>
    </form>

<script>
    button.onclick = function() {
    document.getElementById("output").innerHTML = ????
</script>

</body>
</html>

Thanks in advance

Does this answer your question? Read a local text file using Javascript — Randy Casburn
– Randy Casburn, Commented Dec 18, 2020 at 23:26
Not entirely, I've also some code to read files: <script type="text/javascript"> document.getElementById('file') .addEventListener('change', function() { var fr=new FileReader(); fr.onload=function(){ document.getElementById('output') .textContent=fr.result; } fr.readAsText(this.files[0]); }) </script> or <div><object data="file.txt"></object></div> but what I mainly need it's to search for a text and return a result within the file. Thanks — Camboyano Dominador
– Camboyano Dominador, Commented Dec 19, 2020 at 17:55
this: "I mainly need it's to search for a text and return a result within the file" is unclear to me. I think you mean you want to search for text from within the file you've read with that code. But I don't know what you mean by "return a result with the file". If you mean write to that same file, you cannot do that. You can write to a file, but it will be a download the user will have to initiate. — Randy Casburn
– Randy Casburn, Commented Dec 19, 2020 at 18:07
Sorry for my bad explanation, I need a HTML to open and search data from input from a local file like .txt or .csv and return the value in HTML. I know how open a local file from HTML and show in the page but it will show all data and I only want an specifically data like ex: search for a name Adam in the database.txt and show me as result 26 yo, something like that. Thanks Randy for your replies. — Camboyano Dominador
– Camboyano Dominador, Commented Dec 20, 2020 at 1:07

Randy Casburn · Accepted Answer · 2020-12-20 01:24:58Z

So based upon the clarification (thanks), assuming you have already read the file into a variable named csv as a starting point.

With this stated requirement from the question:

Ex. open and read "file.cvs" = (1;a bc;2;def;3;gh i). If I input value "1", a text "a bc" will be shown.

The following code demonstrates how to create an Object Literal that can be used to filter on the key as you've requested.

Split the string on the ; character
Use reduce to create the object literal (key/value pairs)
Prompt for input
Use input number as the key to look up in the object literal
Replace the DOM content with the value referenced by the key

const csv = "1;a bc;2;def;3;gh i";

const hash = csv.split(';').reduce((acc, n, idx, array) => {
  if (idx % 2) {
    acc[array[idx - 1]] = n;
  } else {
    acc[array[idx]] = '';
  }
  return acc;
}, {});

console.log(hash);
let input = prompt("enter 1,2 or 3");
document.getElementById('output').textContent = hash[input];

<div id="output">Output will go here</div>

Performing the other search you mentioned in the comments requires sample data before an answer can be provided for that one.

Collectives™ on Stack Overflow

Javascript (html): How to search a string in local file (like .csv, .txt, etc)

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related