recently I reached out on here for some help regarding javascript. I needed something that parsed a CSV file and outputted it to HTML.
Someone was able to help me massively. only problem is that it outputs as a one row table. In the CSV file each row does not have a specific amount of columns/data meaning that the row data varies in length.
what I've been trying to do is write some if statements to only pick up things like 'Last name' or 'known for' so i can give some order to the results.
What is the best way to do this? I will need to style the output data so i'm thinking div id's would be better than tables. also, where abouts in the code should i edit (my javascript knowledge is very beginner).
if statement i tried (probably totally wrong):
function firstName($container){
var firstN = $container;
var n = firstN.includes("First Name");
if (n != 0){
document.getElementById("first_name").innerHTML="First name = ";
return;
}
}
main block of code (CSV file can be found at 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>
Thanks in advance!
