object SequelizeInstance after a forEach loop - database

I'm working with Sequelize and a lodash template in a server side (NodeJS) to generate invoices. after each pass of the loop, I have a [object SequelizeInstance] that appears just above my html table.
compiled = _.template("
<div class='row' style='padding: 20px 0px 0px 0px;'>
<div class='col-lg-12 col-md-12 col-sm-12'>
<div class='table-responsive'>
<table border='1' style='width: 100%;'>
<thead>
<tr>
<th>Réf Produit.</th>
<th>Désignation</th>
<th>Quantité</th>
<th>Prix Unitaire</th>
<th>Sous Total</th>
</tr>
</thead>
<tbody>
<% datas = []%>
<% _.forEach(order.OrderedProducts, function(value, key) {%>
<%- datas[key] = value %>
<tr>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.id %></td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.name %></td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].quantity %></td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.price %> €</td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.price * datas[key].quantity %> €</td>
<% }); %>
</tr>
</tbody>
</table>
</div>
<hr>
<div class='row'>
<div style='float: right;' class='col-md-3'>
<div class='ttl-amts'>
<h5> Sous Total : <%= Math.round((order.total_cmd - ((order.total_cmd * 20) / 100)) * 100) / 100 %> €</h5>
</div>
<hr>
<div class='ttl-amts'>
<h5> TVA : 20%</h5>
</div>
<hr>
<div style='padding: 0px 0px 20px 0px;' class='ttl-amts'>
<h4><strong>Montant Total : <%= order.total_cmd %> €</strong></h4>
</div>
</div>
</div>
Can you help me to resolve this please ? Thanks

I think you should change this line:
<%- datas[key] = value %>
to:
<% datas[key] = value %>
With the extra dash in there you are telling it to echo the value in datas[key], which translates to [object SequelizeInstance].
I would also like to point out that anywhere inside that forEach loop, you can replace datas[key] with value, and then just get rid of that line I mentioned altogether.

Related

Why image is not being displayed in the PDF file?

I am trying to display book data - title, author, publisher and so on, plus image as a cover page. All of the data except the image I managed to display.
Here is my code:
Routes:
Route::get('/dynamic_pdf', 'DynamicPDFController#index');
Route::get('/dynamic_pdf/pdf', 'DynamicPDFController#pdf');
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use PDF;
class DynamicPDFController extends Controller
{
public function index(){
$book_data = $this->get_book_data();
return view('dynamic_pdf')->with('book_data',$book_data);
}
//get book data method
public function get_book_data(){
$book_data = DB::table('books')
->limit(515)
->get();
return $book_data;
}
public function pdf(){
PDF::setOptions(['isHtml5ParserEnabled'=>true, 'isRemoteEnabled'=>true]);
$pdf= \App::make('dompdf.wrapper'); //uses a method of dompdf
$pdf->loadHTML($this->convert_book_data_to_html());// converts book data to html
return $pdf->stream();//makes it able to show pdf file
}
function convert_book_data_to_html()
{
$book_data = $this->get_book_data();
$output = '
<h3 align="center">Book Data</h3>
<table width="100%" style="border-collapse: collapse; border: 0px;">
<tr>
<th style="border: 1px solid; padding:12px;" width="20%">Cover</th>
<th style="border: 1px solid; padding:12px;" width="30%">Title</th>
<th style="border: 1px solid; padding:12px;" width="15%">Author</th>
<th style="border: 1px solid; padding:12px;" width="15%">Publisher</th>
<th style="border: 1px solid; padding:12px;" width="20%">Year</th>
<th style="border: 1px solid; padding:12px;" width="20%">Description</th>
</tr>
';
foreach($book_data as $book)
{
$output .= '
<tr>
<td style="border: 1px solid; padding:12px;"> <img src="/storage/public/cover_images/'. $book->image .'"> </td>
<td style="border: 1px solid; padding:12px;">'. $book->title.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->author.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->publisher.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->year.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->description.'</td>
</tr>
';
}
$output .= '</table>';
return $output;
}
}
View:
<!DOCTYPE html>
<html>
<head>
<title>Laravel - How to Generate Dynamic PDF from HTML using DomPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
}
</style>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Welcome to our pdf data</h3><br />
<div class="row">
<div class="col-md-7" align="right">
<h4>Books Data</h4>
</div>
<div class="col-md-5" align="right">
Convert into PDF
</div>
</div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Cover</th>
<th>Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Year</th>
<th>Description</th>
</tr>
</thead>
<tbody>
#foreach($book_data as $book)
<tr>
<td> <img src="{{asset('/storage/public/cover_images/'.$book->image )}}" style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;"></td>
<td>{{ $book->title }}</td>
<td>{{ $book->author }}</td>
<td>{{ $book->publisher }}</td>
<td>{{ $book->year }}</td>
<td>{{ $book->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
The images from the view I can display but when I click the button to convert to PDF the images are not displayed but it says image not found or type unknown.
I really do not understand why it does not work.

Add new row in a table using ng-repeat

I have one table in that am trying to do following functions:
Initially one empty row and add button will be there.
When I click add button after entering details in first row, new row should be added and the first row value also should be displayed.
My code below:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope, $http, $timeout) {
$scope.addContactDetail = function () {
$scope.contactDetails = {
email: $scope.contactDetail.email,
bolId: $scope.contactDetail.billId
};
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
}
<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.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
<tr>
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addDetail()">
<span>ADD</span>
</div>
</div>
</body>
When I click add button after entering data in first row, 3 new rows are being added before the first row. What's wrong?
You have 3 new rows added, since you are adding 3 properties to the $scope.contactDetails object and ngRepeat iterates over them. You simply can have an array of contactDetails and add new item to this array in your addContactDetail method, like this:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope) {
//first row initially empty
$scope.contactDetails = [{}];
$scope.addContactDetail = function () {
//add more empty rows
$scope.contactDetails.push({});
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
padding-bottom: 10px;
border-style: solid;
border-color: #b3b3b3;
border-width: 0px 1px 1px 1px;
}
<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.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="{{contactDetail.bolId + 'Bol'}}"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="{{contactDetail.bolId + 'Bol'}}">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addContactDetail()">
<span>ADD</span>
</div>
</div>
</body>

elementnotvisibleexception for dropdown

I am having following problem. I have a table which contains a dropdown in each row corresponsing to first column element of that particular row. But when i try to select an element from a particular dropdown, i am getting element not visible exception.
Here is the page structure :-
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabPopup::content" style="top:auto;right:auto;left:auto;bottom:auto;width:auto;height:auto;position:relative;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog" class="x1c9">
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<table class="x1cg" border="0" cellspacing="0" cellpadding="0" summary="" data-afr-shaddec="sd$1">
<tbody>
<tr>
<tr>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_cse" class="p_AFResizable x1ct"/>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::contentContainer" class="p_AFResizable x1o" tabindex="-1">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_ccntr" class="x1cr" style="width:800px;height:450px;position:relative;overflow:auto;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabpgl1" class="x1a">
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pgl108" class="x1a" style="margin-left:15px; width:auto;min-height:500px;/*width:750px;height:500px*/">
<div>
<div>
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2" class="xpq" style="margin-left:15px; width:auto;min-height:450px; /*width:720px;height:450px*/">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2::f" class="xrd" style="left:0px;top:0px;height:181px;right:0px;padding:0px;border-width:0px">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pglks4" class="x1a" style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px">
<div>
<table id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:j_id__ctru13pc10" class="xsk x1a" border="0" cellspacing="0" cellpadding="0" summary="">
<tbody>
<tr>
<td>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78" class="xsk xdn" style="height:165px">
<table class="xu2 p_AFCore p_AFDefault" border="0" width="0" cellspacing="0" cellpadding="0" summary="">
<div class="x1fp p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78::content" class="x5s p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable" class="xsk xsw" _leafcolclientids="['dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru16pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru18pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru21pc10']" style="height:114px" tabindex="0">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::ch" class="x143" _afrcolcount="3" style="overflow: hidden; position: relative; width: 441px; border-right-width: 0px;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::db" class="x13v" _afrcolcount="3" style="position: relative; width: 441px; overflow: hidden; height: 85px; z-index: 1;">
<table class="x13w x14n" cellspacing="0" _startrow="0" _rowcount="10" _selstate="{'3':true,'2':true,'1':true,'0':true,'7':true,'6':true,'5':true,'4':true,'9':true,'8':true,'afrSelectAll':true}" _totalwidth="363" style="table-layout: fixed; position: relative; width: 441px;">
<tbody>
<tr class="x13u " _afrrk="0">
<tr class="p_AFFocused p_AFSelected x13u " _afrrk="1">
<td class="x14j" align="center" nowrap="" style="">
<td class="x14j" align="center" nowrap="">
<span id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:1:j_id__ctru19pc10" class="p_AFFocusTarget p_AFHoverTarget x1z">
The last dropdown is the is the item from where i am trying to select an option but getting this exception .
And below is the code that i used to find it.
WebElement we = driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']"));
scrollIntoView(we);
Select select = new Select(driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']/../..//select")));
select.selectByVisibleText(newActivity);

How To Remove Current Record When Click On Remove Button

I am New For Angular-js Please Heip On Coding With Dynamic Table Creation .I added Some Records Helping With Json Ang ng-model but How To Remove Current Record When Click On Remove Button.
Passing With This Operator.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.emplist = [
{empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
{empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
{empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
{empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
{empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
{empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
{empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
{empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
{empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
{empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
];
$scope.addItem = function(){
$scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});
$scope.empname = '';
$scope.empsalary = '';
$scope.empid = '';
}
$scope.remItem = function(x){
$scope.emplist.splice(x,1);
}
});
body{
font-size: 14px;
font-family: Arial;
color:#333;
}
<!DOCTYPE Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table style="width:100%;">
<tr height="25" style=" background: #99ff00;">
<th width="5%"></th>
<th width="40%">EMP Name</th>
<th width="30%">EMP Salary</th>
<th width="25%">EMP ID</th>
</tr>
<tr height="25" ng-repeat="x in emplist">
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{$index}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{$index}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{x.empname}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{x.empname}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empsalary}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empsalary}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
</tr>
<tr height="25">
<td><button ng-click="addItem();" style="background: #00ffff; border:0px; width:100%; height:100%;">Add</button></td>
<td style="padding:2px;"><input type="text" ng-model="empname" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empsalary" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empid" style="width:100%;" ></td>
</tr>
</table>
</div>
</body>
</html>
Instead of showing the table row for each record, use ng-repeat
<tr ng-repeat="emp in emplist">
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td><button ng-click="remItem($index)">Remove</button></td>
And inside the controller directly you can get the $index
$scope.remItem = function(itemIndex){
$scope.emplist.splice(itemIndex,1);
}
Please Pass Current Index in your function
<button ng-click="remItem(x,$index);" > Remove</button>
$scope.remItem = function(x,index){
$scope.emplist.splice(index,1);
}
It will help you !!!
Try this
<button ng-click="remItem(x);" > Remove</button>
and in controller
$scope.remItem = function(item){
var index = $scope.emplist.indexOf(item);
$scope.emplist.splice(index,1);
}
**You can delete the row based on index **
<button title="Remove" ng-click="removeFile($index)"></button>
$scope.removeFile = function (index) {
if (!confirm("Are you sure you want to remove?")) {
return;
}
$scope.emplist.splice(index, 1);}

How to click on row element by text instead of xpath using selenium 2 robotframework

<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="DataTables_Table_4" class="dataTable no-footer" role="grid" aria-describedby="DataTables_Table_4_info" style="width: 100%;">
<thead>
<tbody>
<tr class="odd" role="row">
<tr class="even" role="row">
<td class="center-col multiRowSelect sorting_1">
<td>GROUP4</td>
<td class=" center-col">Enterprise Open</td>
<td class=" center-col">0</td>
</tr>
</tbody>
</table>
</div>
Are you absolutely sure you don't like xpath for that? It is awfully powerful and can in fact very well be used to find by text:
Click Element xpath=//*[contains(text(),"GROUP")]/parent::tr

Resources