Question

所以我将CSV文件解析为JSON然后编辑它们以便我可以获得jquery将用来制作图形的数组。

我尝试制作下拉菜单，以便用户可以选择要制作图表的CSV文件。到目前为止，我已使用本地文件，因此我使用了{}。我是jquery的新手，也是html的初学者，所以请解释一下解决方案中发生了什么。

编辑：文件目录为＆＃34; CSV / Sheet1.csv＆＃34;，Sheet2.csv ...

执行此操作的一种方法是编写一个函数，在选择下拉菜单时打开特定文件，但我只需要一个函数从菜单中获取输入。

这是我的html，样式表和我希望它链接到的JavaScript。

＆＃13;

function handleFileSelect(evt) {
    if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
        return;
    }    
    Papa.parse(evt.target.files[0], {
        header: true,
        dynamicTyping: true,
        delimiter: ";",
        complete: function (results) {
            debugDataset(results);
            renderDataset(results);
        }
    });
}

function debugDataset(dataset) {
    var formatted = JSON.stringify(dataset, null, 2);
 }

function renderDataset(dataset) {
    var raw_data = dataset;
    var formatted_data = {};

    for(var i in raw_data.data) {
  var keys = Object.keys(raw_data.data[i]);
  for(var k = 0, len = keys.length; k < len; k++) {
    if(typeof formatted_data[keys[k]] !== "undefined") {
      formatted_data[keys[k]].push(raw_data.data[i][keys[k]]);
    } else {
      formatted_data[keys[k]] = new Array(raw_data.data[i][keys[k]]);
    }
  }
}
console.log(formatted_data);
}

$(function () {
    $("#csv-file").change(handleFileSelect);
});

＆＃13;

.graphbox {
    width:500px;
    height:500px;
    
    border:1px solid black;
    padding:5px;
    
    margin:auto;
}
.dropdownmenubox {
    width:500px;
    height:23px;
    
    margin:auto;
    
    border:1px solid black;
    padding:5px;
}

.dropdownmenu {
    width:500px;
    margin:auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>grafi revije</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="js/libs/jquery/jquery.js"></script>
        <script src="js/libs/PapaParse/papaparse.js"></script>
        <script src="index.js"></script>
        
        <link type="text/css" rel="stylesheet" href="index.css"/>
        
    </head>
    <body>
        <div class="graphbox"></div>   
        <div class="dropdownmenubox">
            <select class="dropdownmenu">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
            </select>
        </div>    
    </body>
</html>

＆＃13;

Answer 1

所以我目前正在使用的解决方案就是这个，它可以工作：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>grafi revije</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="js/jquery.js"></script>
        <script src="js/papaparse.js"></script>
                
        <link type="text/css" rel="stylesheet" href="index.css"/>
        
    </head>
    <body>
        <div class="graphbox"></div>   
        <div class="dropdownmenubox">
            <select name="CSV">
                <option value="CSV/Sheet1.csv">1</option>
                <option value="CSV/Sheet2.csv">2</option>
                <option value="CSV/Sheet3.csv">3</option>
                <option value="CSV/Sheet4.csv">4</option>
                <option value="CSV/Sheet5.csv">5</option>
                <option value="CSV/Sheet6.csv">6</option>
                <option value="CSV/Sheet7.csv">7</option>
                <option value="CSV/Sheet8.csv">8</option>
                <option value="CSV/Sheet9.csv">9</option>
                <option value="CSV/Sheet10.csv" selected="selected">10</option>
                <option value="CSV/Sheet11.csv">11</option>
                <option value="CSV/Sheet12.csv">12</option>
                <option value="CSV/Sheet13.csv">13</option>
            </select>
        </div>        
        <script>
            $( "select" ).change(function () {
            $( "select option:selected" ).each(function() {
            var variable = $(this).val();
            console.log(variable);
            Papa.parse(variable, {
            dynamicTyping: true,
            download: true,            
            complete: function(results) {
            console.log(results);
            }
            });
            });
            })
            .change();               
        </script>
        
    </body>
    
</html>

＆＃13;

<select>下拉菜单以定位javascript打开的文件</select>

1 个答案: