1

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

Federico klez Culloca
27.3k17 gold badges61 silver badges102 bronze badges
asked Dec 18, 2020 at 23:22
4
  • Does this answer your question? Read a local text file using Javascript 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 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. 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. Commented Dec 20, 2020 at 1:07

1 Answer 1

0

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.

  1. Split the string on the ; character
  2. Use reduce to create the object literal (key/value pairs)
  3. Prompt for input
  4. Use input number as the key to look up in the object literal
  5. 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.

answered Dec 20, 2020 at 1:24
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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.