我正在尝试将csv文件转换为json对象，然后在页面上显示它。目前我从文件上传控件获取csv文件并读取其数据并在屏幕上显示。但我现在需要先将csv数据转换为JSON，然后在屏幕上显示。
以下是我在屏幕上显示csv文件数据的代码 -
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<title>Japan Automation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src ="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="JavaScript.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h2>ABCD</h2>
<p>EFG</p>
</div>
<div class="panel panel-primary">
<div class="panel-heading">IJKL</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<div class="page-header">
<h2>DIS Automation</h2>
</div>
<form id="form1" runat="server" class="form-horizontal">
<div class="form-group">
<div class="col-sm-5">
<div class="col-sm-6"><input type="file" accept=".csv" id="fileUpload" /></div>
<div class="col-sm-3"><input type="button" id="upload" class="btn btn-primary" value="Upload" /></div>
<div class="col-sm-3"><input type="button" id="validate" class="btn btn-primary" value="Validate" /></div>
</div>
<div class="col-sm-7">
<div class="col-sm-2"><input type="button" id="cancel" class="btn btn-primary" data-toggle="modal" data-target="#myModal" value="Cancel" /></div>
<div class="col-sm-3"><input type="button" id="update" class="btn btn-primary" value="Update Invalid PO" /></div>
<div class="col-sm-5"><input type="button" id="process" class="btn btn-primary" value="Process" /></div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default" style="align-self:center">
<div class="panel-body" style="max-height: 400px;min-height:400px;overflow-y: scroll;">
<div class="row">
<div class="col-sm-12"><center>
<div class="input-append">
<input name="search" id="search" placeholder="Enter PO to filter"/>
<input type="button" value="Filter" id="filter" class="btn btn-primary" />
</div></center></div>
</div>
<div class="row">
<div class="col-sm-12" id="dvCSV">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript.js -
function Upload() {
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = table.insertRow(-1);
var cells = rows[i].split(",");
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
Javascript2.js
$(function () {
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = $("<table />");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = $("<tr />");
var cells = rows[i].split(",");
$("<td />").html('<input type="checkbox" hidden="false"/>').appendTo(row);
table.append(row);
for (var j = 0; j < cells.length; j++) {
var cell = $("<td />");
cell.html(cells[j]);
row.append(cell);
}
table.append(row);
}
$("#dvCSV").html('');
$("#dvCSV").append(table);
}
reader.readAsText($("#fileUpload")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
编辑＃1 - 我已经编辑了我的JS，如下所示，数据正在屏幕上填充，但它的确很糟糕。可以做些什么？
$(function () {
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("TABLE");
var rows = e.target.result.split("\n");
//alert(rows);
var myJsonString = JSON.stringify(rows);
var columnCount = rows[0].length;
for (var i = 1; i < rows.length; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = rows[i][j];
}
}
$("#dvCSV").html('');
$("#dvCSV").append(table);
}
reader.readAsText($("#fileUpload")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
答案 0 :(得分：0)
以下是您可以在项目中导入的库的链接，您应该传递从文件阅读器加载的CSV文本，它将为您进行数学运算并返回JSON对象。
csvObjects = CSV.parse(csvText);
jsonText = JSON.stringify(csvObjects, null, '\t');
jsonField.value = jsonText;