How to import values from a text file to javascript and then populate html dropdowns

Question

i am a relativly new to prgramming, and currently stuck on a problem. Thanks for the feedback, I have used google and looked over many similar questions on stack overflow, they all seem to give answers for importing values from html dropdowns to JavaScript, while I need the exact opposite, I have been looking for an answer for a few hours now, I just though that I should ask here directly after searching for so long. Currently I have coded dropdowns in html, I would like to write a script in JavaScript that would convert values in a text file on the local computer into dropdowns in html format. I have tried FileReader and XMLHttpRequest(); but to no avail Here is my HTML code:

      <optgroup id="Plants" label="plants">
   <option type="checkbox" id="plant_1" name="plant_1" value="Plant1">Plant1</option>
   <option type="checkbox" id="plant_2" name="plant_2" value="Plant2">Plant2</option>
   <option type="checkbox" id="plant_3" name="plant_3" value="Plant3">Plant3</option>
      </optgroup>

    <optgroup id="Animals" label="animals">
   <option type="checkbox" id="Animal_1" name="Animal_1" value="Animal1">Animal1</option>
   <option type="checkbox" id="Animal_2" name="Animal_2" value="Animal2">Animal2</option>
   <option type="checkbox" id="Animal_3" name="Animal_3" value="Animal3">Animal3</option>
      </optgroup>

my script is along the lines of:

  $.Get("TestFile.txt", function k(data){

  var lines = data.split('/n');
 }
   var dropdown = $('Plants');
  for(var i =0; i < lines.length; i++) {
   var count = lines[i];

 $('dropdown').append(count);
  }
  return lines;
  });

What the testfile.txt file will look like:

   Plants - 
   Rose
   Bannana
   Blackberry

   Animals - 
   Lion
   Cow
   Elephant

Why is this tagged c#? Here's some info about reading from a local file with js:https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file — JasonB, Mar 05 '18 at 21:14
Show your work. Edit your question and tell your audience what research you've done, what you've looked for, what you've tried, etc. Google is your friend. You should at least be able to say that you've used google and found nothing, or used google and found all the results unhelpful, and explain why they were unhelpful. — SaganRitual, Mar 05 '18 at 21:27

score 0 · Accepted Answer · answered Mar 05 '18 at 21:46

You can use the append function to do what you want. The code below does what you want. Remember to change the location of your text file. Also, you can use a different algorithm to parse your text file:

<html>
  <header>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  </header>
  <body>
    <select name="myselect">
    </select>
  </body>
<script>
$.get("http://127.0.0.1/file.txt", function (data) {
  var lines = data.split('\n').map(function(line){
    return line.trim();
  });
  var select = $("select[name=myselect]")
  var optionCounter = 0;
  var currentGroup = "";
  lines.forEach(function(line){
    if(line.endsWith(" -")){
      currentGroup = line.substring(0, line.length - 2);
      optionCounter = 0;
      select.append("<optgroup id='" + currentGroup + "' label='" + currentGroup + "'>")
    } else if(line === ""){
      select.append("</optgroup>");
    } else {
      select.append("<option type='checkbox' id='" 
          + (currentGroup + optionCounter) + "' name='" 
          + (currentGroup + optionCounter) + "' value='" 
          + line + "'>" + line + "</option>");
    }
  });
  console.log(lines);
});
</script>
</html>

```

How to import values from a text file to javascript and then populate html dropdowns

1 Answers1