I'm making a web page with a table that reads excel files. Following this example here: https://www.youtube.com/watch?v=OK60UdWyUdE. In this project, 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:
<!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:
(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!
Related
I'm trying to toggle CSS stylesheets by clicking one of two buttons. However, my code isn't working. Not sure what I'm missing. I'm working with a separate index.html that I cannot modify and a separate js file.
Here is my code below. I'm getting a TypeError: cannot read properties of null (reading addEventListener'.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 4</title> <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
<script src="styler.js"></script>
</head>
<body>
<form>
<button id="styleA" type="submit">Use styleA</button>
<button id="styleB" type="submit">Use styleB</button>
</form>
<article>
<h1>OSU Beaver Store - CS 290 Version</h1>
<p>Catering to All Your Beaver-Gear Needs</p>
<div>
<table>
<caption>Our Most Popular Items</caption>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orange Beaver Polo</td>
<td>49.00</td>
</tr>
<tr>
<td>3 Pack Beaver Socks</td>
<td>28.00</td>
</tr>
<tr>
<td>Orange Beavers Hat</td>
<td>32.50</td>
</tr>
<tr>
<td>Waterproof Jacket</td>
<td>65.55</td>
</tr>
</tbody>
</table>
</div>
<div id="beaver-store">
Visit The Official Beaver Store
</div>
</article>
<div>
<span id="o">O</span><span id="s">S</span><span id ="u">U</span>
</div>
</body>
</html>
JS File:
"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");
function changeToA(){
preventDefault();
aLink.setAttribute('href', 'styleB.css');
}
function changeToB(){
aLink.setAttribute('href', 'styleB.css');
}
aButton.addEventListener("click",changeToA);
bButton.addEventListener("click",changeToB);
***Update:
I figured it out. Needed to have another event listener for DOMloadedcontent.
I have been trying to Export a table from a jsp page to Excel using AngularJs.
Will Angularjs not work in IE? and also getting this error SCRIPT5009: 'Node' is undefined
In Chrome and Firefox, the excel is getting opened only when i save it and not with open with option. The saved Excel is not proper. Trying to solve this for weeks.
Even tried using Jquery, but no luck.
Please suggest me a solution.Really grateful.
My jsp:
<html>
<head>
<script src="/Pulse/static/scripts/jquery-1.11.2.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
</head>
<body>
<div id="myCtrl" ng-app="myApp" ng-controller="myCtrl">
<table>
<tr><td>
<p ng-click="exportData()" id="myImg">Click here</p>
</td></tr>
</table>
<div id="exportable">
<table width="100%" id="myTable">
<thead>
<tr>
<th>Num</th>
<th>Sq</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
My angularjs:
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl',function($scope, $http) {
$scope.exportData = function() {
var blob = new Blob(
[ document.getElementById('myTable').innerHTML ],
{
type : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
window.saveAs(blob, "MyRep.xls");
}
});
</script>
i get this, when clicking on open with excel in firefox:
On opening the saved excel :
Can anyone please point out what i am doing wrong?
you can prube this:
var myApp = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngTouch', 'mgcrea.ngStrap']);myApp.controller('myCtrl',function($scope, $http,$timeout) {
$scope.exportData = function() {
$timeout(function () {
var blob = new Blob([ document.getElementById('myTable').innerHTML ],
{
type : "application/vnd.ms-excel"
});
saveAs(blob, "MyRep.xls");}, 2000);
}
});
i guess that run good in firefox
and i have this others scripts in my page where i use
<link href="~/Content/Controls/AngularStrap/libs.min.css" rel="stylesheet" /><script src="~/Content/Controls/AngularStrap/angular-strap.min.js"></script><script src="~/Content/Controls/AngularStrap/angular-strap.tpl.min.js"></script><script src="~/Content/Controls/FileSaver/FileSaver.js"></script>
I am using express js framework. I am not able to include javascript file in ejs page.
//This is my index.ejs page
<!DOCTYPE html>
<html>`
<head>
<script type='text/javascript' src= "order.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body ng-app="myApp" ng-controller="orderCtrl">
<div class="container">
<table class="table table-striped">
<thead><tr>
<th>Item Name</th>
<th>Price</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
</div>
</body>
</html>
//This is my JavaScript page order.js which should connect to index.ejs
var app = angular.module('myApp', []);
angular.module('myApp', []).controller('orderCtrl', function($scope) {
$scope.message = 'Hello World!';
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{ fName:'Hege',lName:"Pege" },
{ fName:'Kim',lName:"Pim" },
{ fName:'Sal',lName:"Smith" },
{ fName:'Jack',lName:"Jones" },
{ fName:'John',lName:"Doe" },
{ fName:'Peter',lName:"Pan" }
];
})
I am not able to display the data here {{ user.fName }}. Could someone please help.
You have to include angular in your HTML inside the head in a script tag :
<script type='text/javascript' src= "anularpath/angular.js"></script>
you can use angular cdn in your case if you dont have the file locally like this :
<head>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
and you should move your order.js file script tag to the bottom of the body right before you close the body tag. like this :
<script type='text/javascript' src= "order.js"></script>
</body>
</html>
I am learning AngularJS and ended up with the following code for ToDoList basic app. I viewed it in a browser it didn't work. I am new to the Angular and mightn't get obvious things, so I thought if my app name is
todoApp
Then I should put
$scope.todoApp
instead of
$scope.todo
but turned out that's not an issue.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To DO List</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-theme.css" rel="stylesheet>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var model = {
user: "Adam",
items: [{ action: "Buy flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That's what I get in a browser..
And that's what I guess I am supposed to get...
Why it doesn't work?
Your HTML getting invalid because you are missing " in link tag's rel attribute. Here you are missing:
<link href="bootstrap-theme.css" rel="stylesheet>
^ ==> missing "
Working DEMO /* updated css */
Have a look at Invalid HTML in DEMO. Here you can see after link tag HTML is colored green.
I am having a problem with Mustache.js accessing to the values of a json array and I need some help.
The problem is when I want to access to the values using a table. It always shows [object Object], when it should show the array content.
Below is a working and a non-working example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/0.7.2/mustache.js"></script>
</head>
<body>
<div id="template" style="display:none">
<p>Works but not what I need:</p>
<p>{{#numbers}} {{.}} {{/numbers}} </p>
<p>Doesn't work:</p>
<table>
<tr>
{{#numbers}} <th> {{.}} </th> {{/numbers}}
</tr>
</table>
</div>
<div id="rendered"></div>
<script>
var json = {
"numbers": [ 1, 2, 3 ]
};
var compiledTemplate = Mustache.to_html($('#template').html(), json).replace(/^\s*/mg, '');
$('#rendered').html(compiledTemplate);
</script>
</body>
</html>
Output is:
Works but not what I need:
1 2 3
Doesn't work:
[object Object]
Is there any way to solve this problem or to print the object attributes using mustache.js?
The issue was already asked in their issue system, no replies yet:
https://github.com/janl/mustache.js/issues/295
Thanks,
Mariano.
Finally, this is what I did.
Replaced the div element template, to a script element:
from <div id="template" style="display:none"> to <script id="template" type="text/x-mustache-template">
And worked as expected =)
Would you like this?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/0.7.2/mustache.js"></script>
</head>
<body>
<div id="template" style="display:none">
<p>Works but not what I need:</p>
<p>{{#numbers}} {{.}} {{/numbers}} </p>
<p>Doesn't work:</p>
<table>
<tr>
{{#numbers}} {{{th}}} {{/numbers}}
</tr>
</table>
</div>
<div id="rendered"></div>
<script>
var json = {
"numbers": [ 1, 2, 3 ],
"th": function () {
return "<th>" + this + "</th>"
}
};
var compiledTemplate = Mustache.to_html($('#template').html(), json);
$('#rendered').html(compiledTemplate);
</script>
</body>
</html>
I spent a lot of time debugging this.
The problem is $('#template').html(). It returns broken HTML because table markup is malformed (stuff outside <th> is rendered outside the table by browser)
That is why changing to <script> helps