Question

最近我在这里找到了一些关于javascript的帮助。我需要一些解析CSV文件并将其输出为HTML的东西。

有人能够大力帮助我。唯一的问题是它输出为一行表。在CSV文件中，每行没有特定数量的列/数据，这意味着行数据的长度不同。

我一直试图做的是写一些if语句，只选择“姓氏”或“知道”之类的内容，这样我就可以对结果做出一些命令。

最好的方法是什么？我需要设置输出数据的样式，所以我认为div id会比table更好。另外，我应该编辑代码中的内容（我的javascript知识非常初学）。

如果声明我试过（可能完全错误）：

  function firstName($container){
      var firstN = $container;
      var n = firstN.includes("First Name");

    if (n != 0){
        document.getElementById("first_name").innerHTML="First name = ";
        return;
    }
    }

主要代码块（可在http://www.fooda.website/testResults.csv找到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>

提前致谢！

Answer 1

简短的回答是＆＃34;这是许多人的重复＆＃39;如何将JSON转换为HTML表格＆＃39;关于SO＆＃34;的问题最后我会指出你们中的一些人，但我想引导你们完成它。

CVS（逗号分隔值）看起来像

Col1,Col2,Col3,Col4
row1value1,row1value2,row1value3
row2value1,row2value2
row3value1,,row3value3,row3value4

虽然不是必然这种情况，但您可以将CSV视为一种非常简洁的文本形式，即编写表格，其中每一行的值都是相同的顺序（如表格）列）和空单元格看起来像＆＃34; ,,＆＃34;。如果上面的csv是一个表（例如，如果你将它导入Excel等），它将是

Col1       Col2       Col3       Col4
row1value1 row1value2 row1value3
row2value1 row2value2
row3value1            row3value3 row3value4

另一方面，您的数据实际上是JSON＆＃34;对象＆＃34;的列表，每行一个。在JSON中，对象包含在{ }中，由＆＃34;键/值＆＃34;组成。对。 JSON对象看起来像

{"key1":"value1", "key2":"value2"}

JSON允许您将对象分组到数组。 JSON数组包含在[ ]。

中

在JSON中，上表看起来像

[{'Col1':'row1value1','Col2':'row1value2','Col3':'row1value3'},
 {'Col1':'row1value1','Col2':'row1value2'},
 {'Col1':'row1value1','Col3':'row1value3','Col4':'row1value4'}]

使用JSON时，您可以说＆＃34;遍历数组中的每个对象＆＃34;和＃34;对于当前对象，给我Col2值。＆＃34; （注意这意味着相关的JSON对象不必以相同的顺序列出键/值对，并且您不必指定缺失值。）如果您知道阵列中的每个可能的键（在这种情况下，你可以说是Col1，Col2，Col3和Col4）

＆＃34;循环遍历数组，将每个对象放在<tr>中，每个对象对象首先将Col1值放在<td>中，然后放入Col2值在<td>中，然后将Col3值放在<td>中，然后放入Col4 值<td>。＆＃34;

这正是你想要做的......事实证明，已经有很多工具可以做到！您和使用它们之间唯一的问题是在文件的开头加[，在除最后一行之外的每一行末尾加,，最后加]的文件。如果你能做到这一点，那么你很幸运。如果这是静态数据，只需在文本编辑器中打开数据，然后使用find / replace添加行尾逗号。如果它是在动态生成的，那么您必须想出一种方法来添加内容（解决方案将类似于[，将文件拆分为{{1}除非它是最后一个块，然后在}上添加，然后通过JSON-to-HTML-运行它，在分裂数据的每个块上加上,。表工具）。我将离开你究竟是怎么做到的 - 如果你感到难过，肯定会打开一个新的＆＃34;如何将json对象列表转换为json数组＆＃34;题。我不是JSON专家，我敢打赌它有一些标准的方法吗

以下是一些有前途的JSON-to-HTML表格解决方案。我很想知道其中一个是否适合你！

将这些表输出转换为div输出

1 个答案: