- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在从 fileUpload 控件获取一个 csv 文件,并将 csv 文件也转换为 JSON 对象。现在我试图用这个 JSON 数据填充 html 表。我写了一个 populatetable() 函数,但它没有正确显示数据。 CSV 到 JSON 的转换正在正确进行,如下所示 - JSON object
HTML 文件:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<title></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="CSV_to_JSON.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 5px;
}
.guide {
text-decoration: underline;
text-align: center;
}
.odd {
color: #fff;
background: #666;
}
.even {
color: #666;
}
.hot {
border: 1px solid #f00;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2>---</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">---</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<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-6">
<input type="button" id="upload" class="btn btn-primary" value="Upload" />
</div>
</div>
<div class="col-sm-7">
<div class="col-sm-2">
<input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" />
</div>
<div class="col-sm-2">
<input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" />
</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" id="filterDev" style="visibility:hidden">
<input name="search" id="inputFilter" placeholder="Enter ID to filter" />
<input type="button" value="Filter" id="filter" class="btn btn-primary" />
</div></center>
</div>
<br />
<br />
</div>
<div class="row">
<div class="col-sm-12" id="dvCSV"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="download" style="color: cornflowerblue; visibility: hidden"><strong>Please click the below links to download the processed file..</strong></p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
<p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File1 Download</p>
</div>
<div class="col-sm-3">
<p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File2 Download</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$("#cancel").on("click", function () {
$('input:checked').each(function () {
$(this).closest("tr").remove();
});
});
/*$('#inputFilter').keyup(function () {
var that = this;
$.each($('tr'),
function (i, val) {
if ($(val).text().indexOf($(that).val()) == -1) {
$('#name').animate({
marginTop: 0
},
50,
function () {
$('tr').eq(i).hide();
});
} else {
$('#name').animate({
marginTop: 0
},
50,
function () {
$('tr').eq(i).show();
});
}
});
});*/
$(function () {
$("#process").bind("click", function () {
document.getElementById("File1").style.visibility = "visible";
document.getElementById("File2").style.visibility = "visible";
document.getElementById("download").style.visibility = "visible";
});
});
</script>
CSV_to_JSON.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 id='name'/>");
var lines = e.target.result.split("\n");
var result = [];
var headers = lines[0].split(",");
//alert(headers);
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
alert(JSON.stringify(result));
populateTable(JSON.stringify(result));
}
reader.readAsText($("#fileUpload")[0].files[0]);
}
}
});
});
function populateTable(object) {
var obj = object;
var table = $("<table />");
table[0].border = "1";
var columnCount = obj[0].length;
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html(obj[0][i]);
row.append(headerCell);
}
for (var i = 1; i < obj.length; i++) {
row = $(table[0].insertRow(-1));
for (var j = 0; j < columnCount; j++) {
var cell = $("<td />");
cell.html(obj[i][j]);
row.append(cell);
}
}
var dvTable = $("#dvCSV");
dvTable.html("");
dvTable.append(table);
}
如何在 html 表格中正确显示这些数据?
最佳答案
问题源于您如何从 JSON 对象获取 key 。一个对象没有 length
属性,如果不对其中一个对象调用 Object.keys()
,就不能像数组一样直接遍历它的键:
var columns = Object.keys(obj[0]);
// gives ["ID","Name","City","Address","Designation"]
从那里你可以得到列的长度并引用列数组来设置你的标题行:
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html([columns[i]]);
row.append(headerCell);
}
您还需要修改设置后续表格行的循环,以便在为每一行创建每个单元格时查找列名:
for (var i = 0; i < obj.length; i++) {
row = $(table[0].insertRow(-1));
for (var j = 0; j < columnCount; j++) {
var cell = $("<td />");
cell.html(obj[i][columns[j]]);
row.append(cell);
}
}
这是一个带有一些模拟数据的演示:
var mockData = [{
"ID": 1,
"Name": "Kevin",
"City": "Santa Clara",
"Address": "Longmen",
"Designation": "VP Marketing"
}, {
"ID": 2,
"Name": "Tina",
"City": "São Bartolomeu",
"Address": "Bojongloa",
"Designation": "Computer Systems Analyst III"
}, {
"ID": 3,
"Name": "Kevin",
"City": "Cilolohan",
"Address": "Tai’an",
"Designation": "Paralegal"
}, {
"ID": 4,
"Name": "Rebecca",
"City": "Runović",
"Address": "Tessaoua",
"Designation": "Human Resources Manager"
}, {
"ID": 5,
"Name": "Nancy",
"City": "Merritt",
"Address": "Yur’yevets",
"Designation": "Assistant Manager"
}, {
"ID": 6,
"Name": "Anne",
"City": "Pio Duran",
"Address": "Kuala Lumpur",
"Designation": "Sales Representative"
}, {
"ID": 7,
"Name": "Scott",
"City": "Xiamao",
"Address": "Banjarmasin",
"Designation": "Computer Systems Analyst II"
}, {
"ID": 8,
"Name": "Howard",
"City": "Rzeczenica",
"Address": "Nanyo",
"Designation": "Recruiting Manager"
}, {
"ID": 9,
"Name": "Frances",
"City": "Tubuhue",
"Address": "Rambatan",
"Designation": "Senior Quality Engineer"
}, {
"ID": 10,
"Name": "Bruce",
"City": "Gandi",
"Address": "Manuel Roxas",
"Designation": "Senior Financial Analyst"
}, {
"ID": 11,
"Name": "Victor",
"City": "Liuhou",
"Address": "Sambirejo",
"Designation": "Actuary"
}, {
"ID": 12,
"Name": "Phillip",
"City": "Fubei",
"Address": "Ulset",
"Designation": "Account Representative II"
}, {
"ID": 13,
"Name": "Cheryl",
"City": "Chasŏng",
"Address": "Otok",
"Designation": "Mechanical Systems Engineer"
}, {
"ID": 14,
"Name": "Arthur",
"City": "Shimodate",
"Address": "Morada Nova",
"Designation": "Payment Adjustment Coordinator"
}, {
"ID": 15,
"Name": "Jean",
"City": "Mojo",
"Address": "Pushkino",
"Designation": "Budget/Accounting Analyst II"
}, {
"ID": 16,
"Name": "Russell",
"City": "Qīrah",
"Address": "Vista Hermosa",
"Designation": "Research Assistant III"
}, {
"ID": 17,
"Name": "Larry",
"City": "Garoua Boulaï",
"Address": "Guanchi",
"Designation": "Office Assistant I"
}, {
"ID": 18,
"Name": "Kathleen",
"City": "Thongwa",
"Address": "Awilega",
"Designation": "Social Worker"
}, {
"ID": 19,
"Name": "Michael",
"City": "Hongqi",
"Address": "Karatau",
"Designation": "Electrical Engineer"
}, {
"ID": 20,
"Name": "Anna",
"City": "Xiacang",
"Address": "K Bang",
"Designation": "Product Engineer"
}];
function populateTable(object) {
var obj = object;
var table = $("<table />");
table[0].border = "1";
var columns = Object.keys(obj[0]);
var columnCount = columns.length;
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html([columns[i]]);
row.append(headerCell);
}
for (var i = 0; i < obj.length; i++) {
row = $(table[0].insertRow(-1));
for (var j = 0; j < columnCount; j++) {
var cell = $("<td />");
cell.html(obj[i][columns[j]]);
row.append(cell);
}
}
var dvTable = $("#dvCSV");
dvTable.html("");
dvTable.append(table);
}
populateTable(mockData)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvCSV">
</div>
关于javascript - 使用 JSON 对象数据填充 html 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39815692/
最近开始学习MongoDB。今天老师教了我们 mongoexport 命令。在练习时,我遇到了一个典型的问题,包括教练在内的其他同学都没有遇到过。我在我的 Windows 10 机器上使用 Mongo
我是 JSON Schema 的新手,读过什么是 JSON Schema 等等。但我不知道如何将 JSON Schema 链接到 JSON 以针对该 JSON Schema 进行验证。谁能解释一下?
在 xml 中,我可以在另一个 xml 文件中包含一个文件并使用它。如果您的软件从 xml 获取配置文件但没有任何方法来分离配置,如 apache/ngnix(nginx.conf - site-av
我有一个 JSON 对象,其中包含一个本身是 JSON 对象的字符串。我如何反序列化它? 我希望能够做类似的事情: #[derive(Deserialize)] struct B { c: S
考虑以下 JSON { "a": "{\"b\": 12, \"c\": \"test\"}" } 我想定义一个泛型读取 Reads[Outer[T]]对于这种序列化的 Json import
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 11 个月前关闭。 Improve
我的旧项目在 MySQL 中有 Standard JSON 格式的数据。 对于我在 JS (Node.js) 和 DynamoDB 中的全新项目,关于 Standard JSON格式: 是否建议将其转
JSON 值字符串、数字、true、false、null 是否是有效的 JSON? 即,是 true 一个有效的 JSON 文档?还是必须是数组/对象? 一些验证器接受这个(例如 http://jso
我有一个 JSON 字符串,其中一个字段是文本字段。这个文本字段可以包含用户在 UI 中输入的文本,如果他们输入的文本是 JSON 文本,也许是为了说明一些编码,我需要对他们的文本进行编码,以便它不会
我正在通过 IBM MQ 调用处理数据,当由 ColdFusion 10 (10,0,11,285437) 序列化时,0 将作为 +0.0 返回,它会导致无效的 JSON并且无法反序列化。 stPol
我正在从三个数组中生成一个散列,然后尝试构建一个 json。我通过 json object has array 成功了。 require 'json' A = [['A1', 'A2', 'A3'],
我从 API 接收 JSON,响应可以是 30 种类型之一。每种类型都有一组唯一的字段,但所有响应都有一个字段 type 说明它是哪种类型。 我的方法是使用serde .我为每种响应类型创建一个结构并
我正在下载一个 JSON 文件,我已将其检查为带有“https://jsonlint.com”的有效 JSON 到文档目录。然后我打开文件并再次检查,结果显示为无效的 JSON。这怎么可能????这是
我正在尝试根据从 API 接收到的数据动态创建一个 JSON 对象。 收到的示例数据:将数据解码到下面给出的 CiItems 结构中 { "class_name": "test", "
我想从字符串转换为对象。 来自 {"key1": "{\n \"key2\": \"value2\",\n \"key3\": {\n \"key4\": \"value4\"\n }\n
目前我正在使用以下代码将嵌套的 json 转换为扁平化的 json: import ( "fmt" "github.com/nytlabs/gojsonexplode" ) func
我有一个使用来自第三方 API 的数据的应用程序。我需要将 json 解码为一个结构,这需要该结构具有“传入”json 字段的 json 标签。传出的 json 字段具有不同的命名约定,因此我需要不同
我想使用 JSON 架构来验证某些值。我有两个对象,称它们为 trackedItems 和 trackedItemGroups。 trackedItemGroups 是组名称和 trackedItem
考虑以下案例类模式, case class Y (a: String, b: String) case class X (dummy: String, b: Y) 字段b是可选的,我的一些数据集没有字
我正在存储 cat ~/path/to/file/blah | 的输出jq tojson 在一个变量中,稍后在带有 JSON 内容的 curl POST 中使用。它运作良好,但它删除了所有换行符。我知
我是一名优秀的程序员,十分优秀!