-
July 9th, 2021, 02:47 AM
#1
Imported Excel data in HTML Table is Undefined
I'm making a web page with a table that reads excel files. Here, I use angular, jQuery, HTML, and Javascript.
Here is a sample of a excel file:
User Name |User ID
Jack Sparrow |U382
Pikachu |U712
Sonic |U555
Mario |U153
Godzilla |U999
James Bond |U007
Ethan Hunt |U053
This is my HTML file:
HTML Code:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<div>
<div>
<h1>Excel Reader</h1>
</div>
<div id="image">
<img src="432-433.png" width="450" height="300">
</div>
</div>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="customjs.js"></script>
<script src="xlsx.full.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body ng-controller='MyController'>
<div>
<form enctype="multipart/form-data">
<input type="file" id="file">
<button type="submit" value='submit' ng-click="uploadExcel()">Upload File</button>
</form>
</div>
<div>
<table id="myTable">
<thead>
<tr>
<th>User Name</th>
<th>User ID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
And this is my Javascript file:
Code:
(function () {
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', myController]);
var excelObj=[];
function myController($scope)
{
$scope.uploadExcel=function()
{
var myFile=document.getElementById ('file');
var input=myFile;
var reader = new FileReader();
reader.onload=function(){
var fileData=reader.result;
var workbook=XLSX.read(fileData,{type: 'binary'});
workbook.SheetNames.forEach(function(sheetName)
{
var rowObject=XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
excelObj=rowObject;
});
for(var i=0;i<excelObj.length;i++)
{
var data=excelObj[i];
$('#myTable tbody:last-child').append("<tr><td>"
+data.User_Name+"</td><td>"
+data.User_ID
+"</td></ tr>");
}
};
reader.readAsBinaryString(input.files[0]);
}
}
})();
I was supposed to let the HTML table display the same data, but all the data ended up undefined. Here is what my table actually displayed:
User Name |User ID
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
What did I miss? How can I fix this issue?
Thanks in advance!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|