Jsreport how to fill the table with data - javascript

im trying to to fill a table with data to export it in pdf using jsreport
but i couldnt manage to do it .
This is the html file :
<h1>test{{test}}</h1>
<table class='table striped'>
<thead>
<tr>
<th>OrderID</th>
<th>ShipAddress</th>
<th>ShipCity</th>
<th>ShipCountry</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{items.order}}</td>
<td>{{items.addr}}</td>
<td>{{items.city}}</td>
<td>{{items.country}}</td>
</tr>
</tbody>
</table>
And this is the data :
{
"items": [
{
"order": "65854",
"addr": "test 1",
"city": "2fc2",
"country": "2fc2"
},
{
"order": "75757",
"addr": "azerty",
"city": "2fc2",
"country": "2fc2"
},
{
"order": "65575784",
"addr": "tst",
"city": "2fc2",
"country": "2fc2"
}
]
}
I've tried a lot of things but i couldnt manage to do it.

you must use
<h1>test{{test}}</h1>
<table class='table striped'>
<thead>
<tr>
<th>OrderID</th>
<th>ShipAddress</th>
<th>ShipCity</th>
<th>ShipCountry</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td>{{order}}</td>
<td>{{addr}}</td>
<td>{{city}}</td>
<td>{{country}}</td>
</tr>
{{/each}}
</tbody>
</table>
https://jsreport.net/learn/handlebars

Related

Using Typescript building table from json

How can I build html table from json? for negative value I want to bold the row. and display NJ warehouse first then CA
{
"action": "query",
"Time": 12,
"data": [
{
"Product": "Iphone",
"Price": 989,
"Warehouse": "NJ"
},
{
"Product": "Ipad mini",
"Price": 429,
"Warehouse": "NJ"
},
{
"Product": "Iphone mini",
"Price": 489,
"Warehouse": "NJ"
},
{
"Product": "Galaxy",
"Price": -1,
"Warehouse": "CA"
},
{
"Product": "Galaxy mini",
"Price": "595.99",
"Warehouse": "CA"
}
]
}
The result should be as below, first display all Warehouse=US then Warehouse=CA
US
Product Price Warehouse
Iphone 989.00 US
Ipad mini 429.00 US
Iphone mini 489.00 US
CA
Product Price Warehouse
**Galaxy -1 US **
Galaxy mini 595.99 CA
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100" colspan="3">NJ</td>
</tr>
<tr>
<td width="100">Product</td>
<td width="50">Price</td>
<td width="50">Warehouse</td>
</tr>
<tr>
<td>Ipad mini</td>
<td>429.00</td>
</tr>
<tr>
<td>Iphone mini</td>
<td>429.00</td>
</tr>
<tr>
<td width="100" colspan="3">CA</td>
</tr>
<tr>
<td width="100">Product</td>
<td width="50">Price</td>
<td width="50">Warehouse</td>
</tr>
<tr>
<td>Galaxy</td>
<td><B>-1</B></td>
</tr>
<tr>
<td>Galaxy mini</td>
<td>595.99</td>
</tr>
</table>

AngularJS nested ng-repeat in table

I am new to AngularJs and have come across an issue with Json data with nested arrays.
I have simplified the code to a simple html doc, this can be found below.
The first property {{HelloMessage}} is working and gets populated with the string value stored in the property HelloMessage, but the ng-repeat is not.
After looking online, I discovered that I in fact had an array within an array, so assumed that I needed to have an ng-repeat within an ng-repeat, but it is not working. I am quite sure that it is something simple that I have done wrong.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="myController">{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data.Records">
<tr ng-repeat="record in stream.Users">
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>
{{stream.Description}}
</td>
<!--<td>
<table>
<tbody>
<tr ng-repeat="b in value">
<td>{{b.user}}</td>
</tr>
</tbody>
</table>
</td>-->
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}
],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}
]
}
]
}
];
});
</script>
</body>
</html>
No errors are throw in Chrome Console
Rewrite the ng-repeat as
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>
Use
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}</td>
instead of
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>{{stream.Description}}</td>
function myController($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>
{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
First you have to define your controller to body level as following.
<body ng-controller="myController">
You have defined it as h1 level so it is not accessible.
I have made changes in your code please as following.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title
</head>
<body ng-controller="myController">
<h1>{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
});
</script>
</html>
Hope this will help you.
thanks
Thank you, thank you all for your help. I have used Geethu Jose answer, but it still did not give me exactly what I was looking for, but after much head scratching I did come up with a solution for my problem. Instead of using the array placeholders [0] I needed access the arrays themselves at the different levels, so I had to change the code to the following.
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<tbody>
<tr ng-repeat="data in Data">
<td>
<table ng-repeat="records in data">
<thead>
<tr>
<th>UserId</th>
<th>User</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{records.UserId}}</td>
<td>{{records.User}}</td>
<td>{{records.Name}}</td>
<td>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tr ng-repeat="streamUser in records.Users">
<td>{{streamUser.Id}}</td>
<td>{{streamUser.UserId}}</td>
<td>{{streamUser.DisplayName}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
It seems that your JSON is full of arrays. It could probably be improved, but there is how you can display it in its current state. You don't need to nest ng-repeat:
<tbody>
<tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
<td>{{user.Id}}</td>
...
</tbody>
Working JSFiddle of your code

Ng-click and ng-show AngularJS

I have a list of dictionaries, and I want to toggle show all the students and their details for each classroom.
This is the HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div class="classrooms-details" ng-show="Students">
<table class="table table-striped">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.student.first_name}}</a></td>
<td>{{classroom.student.last_name}}</td>
<td>{{classroom.student.gender}}</td>
<td>{{classroom.student.birthday}}</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Classroom</th>
<th>School</th>
<th>Academic year</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
</tbody>
</table>
</div>
I've tried to use ng-click/ng-show, but it's not working.
And this is the script:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.classrooms = [{
"school": {
"id": 1,
"school_name": "IPSIA F. Lampertico",
"address": "Viale Giangiorgio Trissino, 30",
"city": "Vicenza"
},
"academic_year": "2015/2016",
"classroom": "1^A",
"floor": 0,
"students": [{
"classroom": 1,
"first_name": "Stefano",
"last_name": "Rossi",
"gender": "M",
"birthday": "1998-06-22"
}, {
"classroom": 1,
"first_name": "Luca",
"last_name": "Possanzini",
"gender": "M",
"birthday": "1999-11-22"
}]
}, {
"school": {
"id": 2,
"school_name": "ITIS A. Rossi",
"address": "Via Legione Gallieno, 52",
"city": "Vicenza"
},
"academic_year": "2015/2016",
"classroom": "2^B",
"floor": 0,
"students": [{
"classroom": 2,
"first_name": "Sergio",
"last_name": "Lazzari",
"gender": "M",
"birthday": "2001-01-29"
}]
}];
console.log($scope.classrooms);
});
I don't know how to access "students" values, and I'd like the students details to be shown only when clicking on the classroom name.
How could I accomplish this?
You just need to set a specific classroom as the "active" classroom and display the students within. The easiest way to do this would be something like:
View
<tr ng-if="activeClassroom" ng-repeat="student in activeClassroom.students">
<td>{{student.first_name}}</a></td>
<td>{{student.last_name}}</td>
<td>{{student.gender}}</td>
<td>{{student.birthday}}</td>
</tr>
...
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
Controller
$scope.activeClassroom = null;
$scope.setActiveClassroom = function (classroom) {
$scope.activeClassroom = classroom;
};

How to display the array of data inside table Using Angular.js ng-repeat

I am facing one issue.I need to display some array of data inside table using Angular.js.I am explaining my code below.
Table:
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Status</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I am explaining my array of data below.
$scope.listOfData=
[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
]
I need to display above data into the table using Angular.js.please help me.
Run this code and check out the output. Let me know if you need different format.. cheers!!!
var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);
function AppController($scope) {
$scope.listOfData=[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
];
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="AppController">
<table cellspacing="5px" style="border:1px solid black;">
<tr >
<th>Date</th>
<th>id</th>
<th>email</th>
<th>Order</th>
</tr>
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr>
<th>Order stat</th>
<th>Id<th>
</tr>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr> -->
Try this
<tr ng-repeat="(key,list) in listOfData">
<td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
<td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
</tr>
Make you header fixed of the table, put it outside of your loop.
Put this outside of the loop i.e ng-repeat
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
You don't want to create it for every item, as it's going to be fixed.
Now, iterate through your list of json objects, using ng-repeat, as explained above.
Something like this..
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<div ng-repeat="list in listOfData">
{{list.id}}
<div ng-repeat="oderlist in list.order">
{{orderlist.order_id}}
</div>
</div>
</table>
You can modify it accordingly.
This will help you,
<tr ng-repeat="item in listOfData">
<td>
<ul>
<li>
{{item.order}} // or print your array element there
</li>
</ul>
</td>

Generating diff view using ng-repeat

I have a json containing revision/history info of modified entity which holds its old and new values. Diff is generated with https://github.com/benjamine/jsondiffpatch and I've done additional parsing myself to form final json format to be rendered.
Example data:
[
{
"createdBy": "admin#localhost",
"modifiedAt": 1445113889873,
"left": [
{
"Status": "Open"
}
],
"right": [
{
"Status": "In Progress"
}
]
},
{
"createdBy": "admin#localhost",
"modifiedAt": 1445114315786,
"left": [
{
"Description": "hello"
},
{
"Assignee": "Uncle Bob (test#test)"
}
],
"right": [
{
"Description": "bye"
},
{
"Assignee": "Willy Wonka (willy#hello)"
}
]
}
]
I am looking a nice way to form a table for this where for each revision I get separately left and right columns and values on separate rows. Probably tired, but I can't figure out how would ng-repeat work for this:
<div ng-repeat="(key, value) in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I am hoping for result like this:
Thanks in advance!
If I am right about data format:
<div ng-repeat="revision in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody ng-repeat="(index, left) in revision.left">
<tr ng-repeat="(field, leftValue) in left">
<td>{{field}}</td>
<td>{{leftValue}}</td>
<td>{{revision.right[index][field]}}</td>
</tr>
</tbody>
</table>
</div>
See it on jsfiddle: http://jsfiddle.net/q6zqgfr8/

Categories