So I have an assignment to connect a CSV in an S3 bucket to a static webpage using JavaScript. I know it's easy enough to use JavaScript to upload and display a csv that the user enters, but instead I want the user to press a button and have the whole CSV loaded/displayed on the webpage. I have a button now called "Generate Statistics" that I'm hoping will do three things: upload csv, display csv, and display some static text such as average age. I'm partially doing this as a workaround to using Lambda, because I've failed miserably with that so far.
Ideally, I want the page to initially look like this: 
Then, after the user clicks the button, I would like the page to upload the dataset like below. Note that I was only able to accomplish this by having the user manually upload the csv from local, which is why the file upload button is still there. I hope to get rid of this button and have only the "Generate Statistics" button work.:
I'm getting a 404 Error when I run this in a fiddle. Does anyone know where I may be going wrong?
My html code is below. I got the csv formatting part from this GitHub and the JavaScript/S3 connection part from here.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML5 File API</title>
</head>
<body >
<div>
<form class="form-horizontal well">
<legend>
<h3>
<div id="title">HTML5 File API</div>
</h3>
</legend>
<fieldset>
<label for="csvFileInput"> <strong>CSV File:</strong>
</label>
<button onclick="myFunction()">Generate Statistics</button>
</div>
</fieldset>
</form>
<div id="output">
<p id="demo"></p>
</div>
</div>
<br>
<br>
<footer>
<center>
<p>© Mounir Messelmeni 2012</p>
</center>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/read-csv.js"></script>
<script>
function myFunction() {
myvar = 'Average Age is 37';
document.getElementById("demo").innerHTML = myvar;}
</script>
<script src="messages.js">
var AWS = require('aws-sdk');
AWS.config.update(
{
accessKeyId: "X",
secretAccessKey: "X",
}
)
var s3 = new AWS.S3();
s3.getObject(
{ Bucket: "fakeemployee", Key: "Employee_Attrition_Data.csv" },
function (error, data) {
if (error != null) {
alert("Failed to retrieve an object: " + error);
} else {
alert("Loaded " + data.ContentLength + " bytes");
// do something with data.Body
var csv = data.Body;
processData(csv);
}
}
)
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
while (allTextLines.length) {
lines.push(allTextLines.shift().split(','));
}
console.log(lines);
drawOutput(lines);
}
//if your csv file contains the column names as the first line
function processDataAsObj(csv){
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
//first line of csv
var keys = allTextLines.shift().split(',');
while (allTextLines.length) {
var arr = allTextLines.shift().split(',');
var obj = {};
for(var i = 0; i < keys.length; i++){
obj[keys[i]] = arr[i];
}
lines.push(obj);
}
console.log(lines);
drawOutputAsObj(lines);
}
function errorHandler(evt) {
if(evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
function drawOutput(lines){
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
for (var i = 0; i < lines.length; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < lines[i].length; j++) {
var firstNameCell = row.insertCell(-1);
firstNameCell.appendChild(document.createTextNode(lines[i][j]));
}
}
document.getElementById("output").appendChild(table);
}
//draw the table, if first line contains heading
function drawOutputAsObj(lines){
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
//for the table headings
var tableHeader = table.insertRow(-1);
Object.keys(lines[0]).forEach(function(key){
var el = document.createElement("TH");
el.innerHTML = key;
tableHeader.appendChild(el);
});
//the data
for (var i = 0; i < lines.length; i++) {
var row = table.insertRow(-1);
Object.keys(lines[0]).forEach(function(key){
var data = row.insertCell(-1);
data.appendChild(document.createTextNode(lines[i][key]));
});
}
document.getElementById("output").appendChild(table);
}
</script>
</body>
</html>
EDIT: I have confirmed that the s3 bucket/key is correct. Please see screenshot of my bucket:
