How to export HTML table in Angular JS? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have created a simple table in HTML file. Now I need to make it exported in PDF or Excel or CSV format in Angular JS? Is there any easy way to do that?

Here is an example which exports html table, you can save as pdf, csv, xlsx and other supported formats by browser.
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.exportData = function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report Example.xls");
};
$scope.items = [{
name: "John Smith",
email: "j.smith#example.com",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "jane.smith#example.com",
dob: "1988-12-22"
}, {
name: "Jan Smith",
email: "jan.smith#example.com",
dob: "2010-01-02"
}, {
name: "Jake Smith",
email: "jake.smith#exmaple.com",
dob: "2009-03-21"
}, {
name: "Josh Smith",
email: "josh#example.com",
dob: "2011-12-12"
}, {
name: "Jessie Smith",
email: "jess#example.com",
dob: "2004-10-12"
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
<br />
<div id="exportable">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>DoB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.dob | date:'MM/dd/yy'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Related

How to destroy kendo-grid programmatically?

I'm trying to destroy the kendo-grid each time my component is destroy.
I found out here a way to do it but requires jquery that I don't use:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.destroy();
</script>
Any one knows how to do it in angular 6 and typescript?
Thank you

How to bind two way data in pure javascript or vanilla js? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Can someone tell me how to bind the data with HTML view from .js(model)
I have array of objects and want to bind that each object from array to present in HTML page.
Here is the JSON data I want to bind
[{
actor_1_name: "CCH Pounder",
actor_2_name: "Joel David Moore",
budget: "237000000",
content_rating: "PG-13",
country: "USA",
director_name: "James Cameron",
genres: "Action|Adventure|Fantasy|Sci-Fi",
language: "English",
movie_imdb_link: "http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1",
movie_title: "Avatar ",
plot_keywords: "avatar|future|marine|native|paraplegic",
title_year: "2009"
},
{
actor_1_name: "Johnny Depp",
actor_2_name: "Orlando Bloom",
budget: "300000000",
content_rating: "PG-13",
country: "USA",
director_name: "Gore Verbinski",
genres: "Action|Adventure|Fantasy",
language: "English",
movie_imdb_link: "http://www.imdb.com/title/tt0449088/?ref_=fn_tt_tt_1",
movie_title: "Pirates of the Caribbean: At World's End ",
plot_keywords: "goddess|marriage ceremony|marriage",
title_year: "2007"
}]
And my view snippet is as below
<div>
<div>
<div>
movie_title
</div>
<div>
content_rating
</div>
</div>
<div>
plot_keywords
</div>
<div>
<span>title_year</span>
<span>language</span>
<span>country</span>
</div>
<div>
<span>Director: </span>director_name
</div>
<div>
<span>Actor 1:</span> actor_1_name <br>
<span>Actor 2:</span> actor_2_name
</div>
</div>
I want to bind data from json object to div, in iteration.
Using javascript only, no jquery no angular framework.
We can achieve same thing using ng-repeat or *ngFor in angular.
This would be a very basic way of doing it. You need to make sure the template variable strings in the div#template exist only once in the template (because of the basic approach to simply replace strings).
let data = [{
"actor_1_name": "CCH Pounder",
"actor_2_name": "Joel David Moore",
"budget": "237000000",
"content_rating": "PG-13",
"country": "USA",
"director_name": "James Cameron",
"genres": "Action|Adventure|Fantasy|Sci-Fi",
"language": "English",
"movie_imdb_link": "http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1",
"movie_title": "Avatar ",
"plot_keywords": "avatar|future|marine|native|paraplegic",
"title_year": "2009"
}, {
"actor_1_name": "Johnny Depp",
"actor_2_name": "Orlando Bloom",
"budget": "300000000",
"content_rating": "PG-13",
"country": "USA",
"director_name": "Gore Verbinski",
"genres": "Action|Adventure|Fantasy",
"language": "English",
"movie_imdb_link": "http://www.imdb.com/title/tt0449088/?ref_=fn_tt_tt_1",
"movie_title": "Pirates of the Caribbean: At World's End ",
"plot_keywords": "goddess|marriage ceremony|marriageproposal|pirate|singapore",
"title_year": "2007"
}]
const tpl = document.getElementById('template');
const content = document.getElementById('content');
for (const item of data) {
let templateStr = tpl.innerHTML;
let template = tpl.cloneNode(true);
for (const prop in item) {
templateStr = templateStr.replace(prop, item[prop]);
}
template.id = '';
template.removeAttribute('hidden');
content.appendChild(template);
template.innerHTML = templateStr;
}
<div id="template" hidden>
<div>
<div>
<div>
movie_title
</div>
<div>
content_rating
</div>
</div>
<div>
plot_keywords
</div>
<div>
<span>title_year</span>
<span>language</span>
<span>country</span>
</div>
<div>
<span class="name">Director: </span>director_name
</div>
<div>
<span>Actor 1:</span> actor_1_name <br>
<span>Actor 2:</span> actor_2_name
</div>
</div>
</div>
<div id="content"></div>
This is how I would do it
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
JavaScript
var my_data = [{
"actor_1_name": "CCH Pounder",
"actor_2_name": "Joel David Moore",
"budget": "237000000",
"content_rating": "PG-13",
"country": "USA",
"director_name": "James Cameron",
"genres": "Action|Adventure|Fantasy|Sci-Fi",
"language": "English",
"movie_imdb_link": "http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1",
"movie_title": "Avatar ",
"plot_keywords": "avatar|future|marine|native|paraplegic",
"title_year": "2009"
},
{
"actor_1_name": "Johnny Depp",
"actor_2_name": "Orlando Bloom",
"budget": "300000000",
"content_rating": "PG-13",
"country": "USA",
"director_name": "Gore Verbinski",
"genres": "Action|Adventure|Fantasy",
"language": "English",
"movie_imdb_link": "http://www.imdb.com/title/tt0449088/?ref_=fn_tt_tt_1",
"movie_title": "Pirates of the Caribbean: At World's End ",
"plot_keywords": "goddess|marriage ceremony|marriage\
proposal|pirate|singapore",
"title_year": "2007"
}];
var parent = document.querySelector('body');
Object.keys(my_data).forEach((object) => {
var divSeperator = document.createElement('div');
parent.appendChild(divSeperator);
Object.keys(my_data[object]).forEach((movieKeyElement) => {
var movieElement = document.createElement('p');
movieElement.innerHTML = my_data[object][movieKeyElement];
// Append a classname
movieElement.classList.add('CLASSNAME');
// Add a class Attribute and set its value
movieElement.setAttribute('class', 'CLASSNAME');
movieElement.setAttribute('contenteditable', 'true');
movieElement.addEventListener('input', () => {
my_data[object][movieKeyElement] = movieElement.innerHTML;
})
divSeperator.appendChild(movieElement);
});
})
this should create elements and full them in with your JSON Values
I've also added functionality to change the JSON values based on the edits on the elements, this could be unsafe though and i'd suggest atleast making a copy and adding validation, though that is beyond the scope of this question

how to pass object data to table using ng-repeat

I have this object named 'SEG-Data as follows. I am trying to put this data into a table form using ng-repeat.
SEG_Data
Object {ImportValues: Array[2]}
ImportValues: Array[2]
0: Object
ImportArray: "0045614"
Name: "dean"
Type: "xyz"
1: Object
ImportArray: "2567741"
Name: "dean"
Type: "abc"
length: 2
The table used is as below and i am using ng-repeat where i mentiond 'field in SEG_data.ImportValues' to get the values.... But somehow i am not getting the data at the UI.
<table style="width:100%" border:"1px">
<tr>
<th>ImportArray</th>
<th>Name</th>
<th>Type</th>
</tr>
<tr ng-repeat="field in SEG_Data.ImportValues">
<td>{{field.ImportArray}}</td>
<td>{{field.Name}}</td>
<td>{{field.Type}}</td>
</tr>
</table>
Any advice if i am doing it wrong for displaying ??
Your object is called SEG_Data but you're referencing SEG_data with a lowercase 'd' in your template. Data displays properly with that one change.
Object
$scope.SEG_Data = {
ImportValues: [{
ImportArray: "0045614",
Name: "dean",
Type: "xyz"
}, {
ImportArray: "2567741",
Name: "dean",
Type: "abc"
}]
};
Template
<table style="width:100%; border:1px">
<tr>
<th>ImportArray</th>
<th>Name</th>
<th>Type</th>
</tr>
<tr ng-repeat="field in SEG_Data.ImportValues">
<td>{{field.ImportArray}}</td>
<td>{{field.Name}}</td>
<td>{{field.Type}}</td>
</tr>
</table>
See plunker example
Working Example :
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.SEG_Data = {
ImportValues: [{
ImportArray: "0045614",
Name: "dean",
Type: "xyz"
}, {
ImportArray: "2567741",
Name: "dean",
Type: "abc"
}]
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr>
<th>ImportArray</th>
<th>Name</th>
<th>Type</th>
</tr>
<tr ng-repeat="field in SEG_Data.ImportValues">
<td>{{field.ImportArray}}</td>
<td>{{field.Name}}</td>
<td>{{field.Type}}</td>
</tr>
</table>
</div>

AngularJS Address Book

I just started learning AngularJS and I'm having some trouble with an Address Book app.
From what I can tell, the syntax is correct but the directives are not displaying the information from my scripts.js file. I tried using "use strict" and declaring ng-app as "AddressBook" but it is only showing the directives on screen and not the data.
I'm guessing I'm missing something but I have no idea what.
Here's my code: (AngularJS is now updated)
Old AngularJS Code:
function PeopleController($scope) {
"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}
New Angular code:
var addressBook = angular.module('addressBook', []);
addressBook.controller('PeopleController', ['$scope', function PeopleController($scope) {
"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}]);
<!DOCTYPE html>
<html ng-app="AddressBook">
<head>
<meta charset="UTF-8">
<title>Address Book</title>
</head>
<body ng-controller="PeopleController">
<h1>Address Book</h1>
<div>
<div ng-repeat="person in people">
<div>{{person.name}}-{{person.phone}}</div>
<span>{{person.city}} </span>
</div>
</div>
<!--Javascript-->
<script src="angular.min.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
Possible reason I have found is your are using latest angular script but you have been using old method. global controller functions encouraged poor practices, so angular resolved to disable this behavior by default from 1.3.
<!DOCTYPE html>
<html ng-app="AddressBook">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body ng-controller="PeopleController">
<h1>Address Book</h1>
<div>
<div ng-repeat="person in people">
<div>{{person.name}}-{{person.phone}}</div>
<span>{{person.city}} </span>
</div>
</div>
<script>
var app = angular.module("AddressBook", []);
function PeopleController($scope) {
//"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}
</script>
</body>
</html>
angular.module('AddressBook', []);
angular.module('AddressBook').controller('PeopleController', PeopleController);
function PeopleController($scope) {
"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}
<!DOCTYPE html>
<html ng-app="AddressBook">
<head>
<meta charset="UTF-8">
<title>Address Book</title>
</head>
<body ng-controller="PeopleController">
<h1>Address Book</h1>
<div>
<div ng-repeat="person in people">
<div>{{person.name}}-{{person.phone}}</div>
<span>{{person.city}} </span>
</div>
</div>
<!--Javascript-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</body>
</html>
Factories are Awesome
First off don't set data in your controller, I know its probably just a test but put it into a factory to replicate your http call.
.factory ('yourFactory', [ function () {
return {
getStuff: function () {
return //your data
};
}
}]);
Passing Data
Then in your controller get the factory data and set the scope
.controller ('yourController', [ '$scope', 'yourFactory', function ($scope, yourFactory) {
yourFactory.getStuff ().then (function (res) {
$scope.people = res.data;
});
}]);
In Conclusion
Having a proper data flow can solve data related problems. Doing a console.log at every step lets you see the resultant data in its current form. Use this to your advantage when trying to get data out of a variable.
Best of luck
Disclaimer code written on mobile phone from memory.
In HTML file, you have used <html ng-app="AddressBook"> and in script file, you have used
var addressBook = angular.module('addressBook', []);
You have to use the same name in both place. So you can fix this by changing your script file
var addressBook = angular.module('AddressBook', [])

AngularJS data-ng-controller doesn't work

I could not figure out why the following code doesn't work at all. Frankly, It looks alright to me. Is there any idea?
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using AngularJS to create a simple Controller</title>
</head>
<body>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
</ul>
</div>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js">
</script>
<script>
function simpleController($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
}
</script>
</body>
</html>
It is to do with the version of angular you are using.
Earlier versions of Angular allowed the ability to assign controller functions to the global scope like you did.
Then this ability was removed from angular.
There are still alot of tutorials around that reference this older style however.
See this demo - http://jsbin.com/fowamutoli/1/edit
I have replaced with angular legacy and your code runs.
So in the future you need to declare an angular module and register your controller against it.
i.e.
<html data-ng-app="app">
<script>
var app = angular.module('app', []).
controller('simpleController', function ($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
</script>
https://docs.angularjs.org/guide/controller
try replacing your data-ng-app to ng-app="myApp", see if it works. :) with the following snippet.
var myApp = angular.module('myApp',[]);
myApp.controller('simpleController', ['$scope', function($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
}]);
Try this instead:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Using AngularJS to create a simple Controller</title>
</head>
<body>
<div ng-controller="simpleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var myApp = angular.module( "MyApp", [] );
myApp.controller("simpleController", function( $scope )
{
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
</script>
</body>
</html>
http://jsfiddle.net/rv7r7nv7/

Categories

Resources