Недавно я потянулся сюда для некоторой помощи в отношении javascript. Мне нужно что-то, что проанализировало CSV-файл и вывело его в HTML.Включение этих выходных таблиц в выходы div
Кто-то был в состоянии помочь мне в массовом порядке. проблема состоит только в том, что он выводится как таблица с одной строкой. В CSV-файле каждая строка не имеет определенного количества столбцов/данных, что означает, что данные строки изменяются по длине.
то, что я пытался сделать, это написать некоторые утверждения if, чтобы подобрать такие вещи, как «Фамилия» или «Известно», поэтому я могу дать некоторый заказ на результаты.
Каков наилучший способ для этого? Мне нужно будет создавать выходные данные, поэтому я думаю, что div id будет лучше, чем таблицы. также, где о чем в коде нужно изменить (мои знания javascript очень новичок).
если заявление я попытался (вероятно, совершенно неправильно):
function firstName($container){
var firstN = $container;
var n = firstN.includes("First Name");
if (n != 0){
document.getElementById("first_name").innerHTML="First name = ";
return;
}
}
основной блок кода (CSV-файл можно найти на http://www.fooda.website/testResults.csv):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.12.3.min.js" type="text/javascript">
</script>
<title>Untitled Document</title>
<script type="text/javascript">
// ============================
// Allow for a cached result
// ============================
var csvRows = [];
// ============================
// ============================
// Given an array of rows build a table.
// ============================
function buildTable(csvRows){
// Our base result
var $table = $("<table cellpadding=\"2\" cellspacing=\"0\"></table>");
// ============================
// For each row in the CSV build a <tr /> and append it to the <table />
// ============================
$table = csvRows.reduce(function($table, csvRow){
// For this demo just take the first few cells/columns
var csvRowCells = csvRow.split(",");
// Our base table row
var $tr = $("<tr>/tr>");
// ============================
// For each cell row build a <td /> and append it to the <tr />
// ============================
$tr = csvRowCells.reduce(function($tr, csvRowCell){
return $tr.append($("<td>/</td>").text(csvRowCell));
}, $tr);
// ============================
// Add our new <tr /> to the table then return the table
return $table.append($tr);
}, $table);
// ============================
return $table;
}
// ============================
// ============================
// Given an array of rows, randomly select one (as an array) and build a table with it.
// ============================
function fillContainerWithTable(csvRows, $container){
var randomRow = [csvRows[Math.floor(Math.random() * csvRows.length)]];
var $table = buildTable(randomRow);
$container.append($table);
}
// ============================
// ============================
// the click handler
// ============================
function myFunction(){
// some random csv I found...
var uri = "http://www.fooda.website/testResults.csv";
var $container = $("#wrap");
// You probably want a clean slate.
$container.empty();
// ============================
// If we have the data locally already just use it.
// ============================
if (csvRows.length !== 0){
console.log("using local data...");
fillContainerWithTable(csvRows, $container);
return;
}
// ============================
console.log("fetching remote data...");
$.get(uri, function(data){
csvRows = data.split("\n");
fillContainerWithTable(csvRows, $container);
});
}
// ============================
</script>
<style type="text/css">
body {
font-family: arial, helvetica, sans-serif;
font-weight: normal;
font-size: 13px;
color: #000;
text-align: left;
margin: 3px 0px;
}
#wrap {
padding: 20px;
}
#wrap table {
border: solid 1px;
border-collapse: collapse;
background-color: aliceblue;
height:400px;
width:100%;
}
#first_name {
height:200px;
width:200px;
background-color:#0C0;
}
</style>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<div id="wrap"></div>
<div id="first_name">
</div><!--first_name-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Заранее спасибо!
Похоже, ваш "CSV" на самом деле JSON, это правильно? – henry
@henry: Я думал то же самое, но это больше похоже на то, что каждая строка является объектом JSON. Но вы правы, «CSV» теряет смысл в этом контексте. gezer4000: У вас есть контроль над форматом «CSV»? Было бы намного проще справиться, если вы преобразуете данные в настоящий JSON. Если вы настроены на CSV, вам следует рассмотреть возможность применения более CSV-подобного макета, где каждый столбец представляет определенный тип значения, даже если этот столбец пуст. – TheJim01
@ TheJim01 Вложенный файл - это всего лишь образец результатов. Фактический файл CSV и имеет около 700 записей. Я очень новичок в javascript, который только пробовал раньше, поэтому я не уверен, что/как разбирать JSON. Я ищу способ сделать каждую запись в строке CSV и вывести ее в HTML с некоторым кодом для фильтрации результатов, чтобы отображались только определенные значения. – gezer4000