Search code examples
htmlfilesearchlocal

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


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


Solution

  • 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.