使用JavaScript從CSV文件創建並填充選擇元素

Question

在csv文件中循環播放時出現問題。 我也不確定是否沒有更簡單的方式來加載文本文件。 我知道for每個循環都有意義，但我不確定csv文件中的單個項目。 我需要整個文本行，並將兩段文本分配給選項的value和choice部分。 有什么建議可以清理嗎？

*更新包含以下建議。 沒有錯誤，但是我的CSS文件未捕獲所創建的元素，因此格式已關閉，並且選擇框僅顯示空白。

<script>
             function processCSV(file,parentNode)
             {
                var frag = document.createDocumentFragment()
                , lines = file.split('\n'), option;                 

                for (var i = 0, len = lines.length; i < len; i++){
                    option = document.createElement("option");
                    option.setAttribute("value", lines[i]);
                    option.innerHTML = lines[i];                        
                    frag.appendChild(option);
                    }
                plant_select.appendChild(frag);
             }

             var plant_select = document.createElement("select");  
             var intial_option = document.createElement("option");
             var datafile = '';
             var xmlhttp = new XMLHttpRequest();

             plant_select.setAttribute("class", "selectbox");   
             plant_select.setAttribute("id", "plant_select");
             intial_option.setAttribute("value","")
             intial_option.setAttribute("disabled","disabled")
             intial_option.setAttribute("selected","selected")
             intial_option.innerHTML = "Please select a Plant";
             plant_select.appendChild(intial_option)

             xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true);
             xmlhttp.send();


             xmlhttp.onreadystatechange = function()
             {
                if(xmlhttp.status==200 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select);
                }
             }
        </script>

Answer 1

假設顯示文本是第一個元素，值在CSV中為第二個元素，並且您知道CSV的格式正確。

var dflines = datafile.split("\n");
for (var i=0; i<dflines.length; i++) {
    dflines[i] = dflines[i].split(",");
    plant_select.options[plant_select.options.length+1] = new Option(dflines[i][0],dflines[i][1],false,false);
}

將為您的當前選擇添加新的選擇選項。

Answer 2

您需要在這里做很多事情：

• 您需要正確處理文本。 請勿for...in字符串或數組上。 它沒有按照您想要的去做。 而是將文件拆分為行的數組並處理這些行。
• 在處理循環中，您在每次運行時都在修改DOM。 這會導致重排並不必要地重塗。 而是使用文檔片段 。
• 您需要在回調中或最好在回調中調用的函數中使用處理代碼。

所以你的處理功能：

    function processCSV(file,parentNode){
      var frag = document.createDocumentFragment()
        , lines = file.split('\n')
        , option
        ;
      for (var i = 0, len = lines.length; i < len; i++){
        option = document.createElement("option");
        option.setAttribute("value", "Choice"); 
        frag.appendChild(option);
      }
      parentNode.appendChild(frag);
    }

然后，您的XHR回調：

xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status==200 && xmlhttp.readyState==4){
    processCSV(xmlhttp.responseText, plant_select);
  }
}

這不會按行進行任何處理，但是我需要您的更多信息以對您有所幫助。 您可能希望按逗號分割並查看各個數據項，這可以使用processCSV函數中的嵌套循環來processCSV 。