Display image format base64 - javascript

I've some problem with this issue., I want to display image.. but it not..
logoSrc in format base64
Issue code
footerLogos(logoSrc) {
var logos = "";
logos += '<tr>';
logos += '<td style="width: 1120px;">';
logos += '<div style="display: flex;align-items: center;font-weight: bold;font-family: arial;font-size: 15px;">';
logos += '</div>';
logos += '</td>';
logos += '<td align="center" width="30" id="footerLogo1">';
logos += '<img src="{{logoSrc}}" height="30"/>';
logos += '</td>';
logos += '</tr>';
return logos;
}

Since your just have base64 data, you need to tell the html that it should be read as a URL. You also need to pass in the variable itself, wrapped in ${} instead of {{}} and `backticks` instead of 'single quotes' because that's how JavaScript does template strings.
footerLogos(logoSrc) {
var logos = "";
logos += '<tr>';
logos += '<td style="width: 1120px;">';
logos += '<div style="display: flex;align-items: center;font-weight: bold;font-family: arial;font-size: 15px;">';
logos += '</div>';
logos += '</td>';
logos += '<td align="center" width="30" id="footerLogo1">';
logos += `<img src="data:image/png;base64,${logoSrc}" height="30"/>`;
logos += '</td>';
logos += '</tr>';
return logos;
}

I will suggest you to revisit the logoSrc and its usage.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
>

Related

JS + sweetalert - insert values from checkbox to input field

I must select from a window (done with sweetalert2) a row.
And insert them according to the column in each input of the following image
This is the code of the pop up...
function detalleTransf( detalle_transferencia_id, matricula, bancoorigenTransf, cbu_cta_origen, titular_cta_origen, ultimos_digitos_cta_origen) {
var datosTransferencia = {{ datosTransferencia|json_encode|raw }} ;
let html = "<html><body>"
html += "<div class='table-responsive'><table class='table table-hover table-condensed no-border'>" +
"<tr class='encabezado-tabla'> <td class='text-center'>Seleccionar </td><td class='text-center'> Matricula</td><td class='text-center'> Banco de Origen</td><td class='text-center'>CBU Cuenta Origen</td><td class='text-center'>Titular Cuenta Origen</td><td class='text-center'>Últimos 5 Dígitos Cuenta Origen</td> </tr>";
for (let row of datosTransferencia) {
html += "<tr id='algo'><td class='text-center'><div class='radio'><input type='checkbox' name='check' value='value' id='regular' onclick='unCheck(this)' ><label style='display: none'>" + row.detalle_transferencia_id + "</div></label></td>";
html += "<td class='text-center'>" + matricula + "</td>";
html += "<td class='text-center'>" + row.transf_banco + "</td>";
html += "<td class='text-center'>" + row.transf_cbu + "</td>";
html += "<td class='text-center'>" + row.transf_titular + "</td>";
html += "<td class='text-center'>" + row.transf_ctaorigen + "</td></tr>";
}
html += "</table></div>";
html += "</body></html>";
return html;
};
Example:
In the sweetalert window, I select a row with the check, the value of the "banco de origen" column... must go in the second image in the input field "banco de origen"
what i need is a function to insert the data from the window to de input field

I want to parse larger decimals to smaller from JSON to Html table

'I created table in Html and table show decimals like is shown in my JSON file(remainingstorage and totalstorage).I want to table show only 5 decimals and not like now 12.I try to parse but without success.Can someone help me how to fix this ?'
[{"acceptingcontracts":true,"netaddress":"22.169.100.43","remainingstorage":119722213376,"totalstorage":119722213376}]
'And my html code'
$(document).ready(function() {
$.getJSON("sample.json", function(data) {
var employee_data = '';
$.each(data, function(key, value) {
employee_data += '<tr>';
employee_data += '<td>' + value.netaddress + '</td>';
employee_data += '<td>' + value.totalstorage + '</td>';
employee_data += '<td>' + value.remainingstorage + '</td>';
employee_data += '<td>' + value.acceptingcontracts + '</td>';
employee_data += '</tr>';
});
$('#employee_table').append(employee_data);
});
});
<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>
<div class="container">
<div class="table-responsive">
<h1>View</h1>
<br />
<table class="table table-bordered table-striped" id="employee_table">
<tr>
<th>Name</th>
<th>Total storage</th>
<th>Remaining storage</th>
<th>View</th>
</tr>
</table>
</div>
</div>
Convert your Number to string then extract first 5 character fromt it then convert it to Number :
Number(value.remainingstorage.toString().substring(0, 5));

How to use socket.io with only EJS without JS code?

Here is my code in EJS which receives data in real time from my node server based on certain parameters.
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<script src="/socket.io/socket.io.js"></script>
<table cellpadding="2" cellspacing="2" border="0" width="100%" align="center">
<thead>
<tr>
<th>Name</th>
<th>IsOnline</th>
<th>Location</th>
</tr>
</thead>
<tbody id="tableData"></tbody>
</table>
<script type="text/javascript">
var socket = io();
socket.on('status', function(data){
var k = '<tbody>'
for(i = 0;i < data.length; i++){
k+= '<tr>';
k+= '<td>' + data[i].url + '</td>';
k+= '<td align="justify">' + data[i].name + '</td>';
k+= '<td align="justify" width="30%">' + data[i].status + '</td>';
k+= '<td align="justify" width="30%">' + data[i].loc + '</td>';
k+= '</tr>';
}
k+='</tbody>';
document.getElementById('tableData').innerHTML = k;
});
</script>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
This code works perfectly fine but,
I have 2 questions :
I can not figure out a clean way to change text color of value of IsOnline based on condition eg: if user is offline then text should be Offline in red color else green.
Also I've created this table using js and html as data variable was not available in EJS so is there some way to get this variable. I do not want to send data using res.render() or ejs.compile()
The following works for me:
for(i = 0;i < data.length; i++){
var color = data[i].status === "Offline" ? "red" : "green"; // If status is 'Offline', use red. If not use green
k+= '<tr>';
k+= '<td>' + data[i].url + '</td>';
k+= '<td align="justify">' + data[i].name + '</td>';
k+= '<td align="justify" width="30%" style="color: ' + color + '">' + data[i].status + '</td>';
k+= '<td align="justify" width="30%">' + data[i].loc + '</td>';
k+= '</tr>';
}

How to create html component in javascript

I wanted to create my html component in javascript. Is there any way I can get this div part from javascript function.
My html code
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">
<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>
</body>
This is my Tic for Tac answer.
var myFunction = function(){
var div = document.getElementById("yourId");
var myTable = '<input type="text" id="myInput" +
'onkeyup="myFunction()" title="Type in a name">'+
'<table id="myTable">'+
'<tr class="header"></tr>' +
'<tr><td>Germany</td></tr>'+
'<tr><td>Sweden</td></tr>'+
'<tr><td>UK</td></tr>'+
'<tr><td>Germany</td></tr>'+
'<tr><td>Canada</td></tr>'+
'<tr><td>Italy</td></tr>'+
'<tr><td>UK</td></tr>'+
'<tr><td>France</td></tr>'+
'</table>';
div.innerHTML = myTable;
}
For appending you can use insertAdjacentHTML
Working fiddle
function myFunction(){
var tableStr = `<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>`;
document.getElementById('tableContainer').insertAdjacentHTML('beforeend', tableStr)
}
You can use document.createElement() like:
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
You can refer this link for more details
if you are using jquery,try:
$("#yourdivid").html('Your html code above');
with javascript:
var div1=document.getElementById('yourdivid');
div1.innerHTML='Your html code above';
jQuery: this is an example from my code, the var html just makes sure u don't have to write the same piece of code over and over again.
var html = '<div class="swiper-slide">';
html += '<div class="bigIm"><a href="' + url1 + '" target="_blank" class="inner" style="background-image: url(' + img1 + ')">';
html += '<div class="imgCont-b imgCont-b-cov1">';
html += '<i class="fa fa-' + d1.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d1.source + '</span>';
html += '<p>' + d1.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '<div class="bigIm">';
html += '<div class="half first"><a href="' + url2 + '" target="_blank" class="inner" style="background-image: url(' + img2 + ')">';
html += '<div class="imgCont-b imgCont-b-cov2">';
html += '<i class="fa fa-' + d2.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d2.source + '</span>';
html += '<p>' + d2.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '<div class="half last"><a href="' + url3 + '" target="_blank" class="inner" style="background-image: url(' + img3 + ')">';
html += '<div class="imgCont-b imgCont-b-cov3">';
html += '<i class="fa fa-' + d3.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d3.source + '</span>';
html += '<p>' + d3.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '</div>';
html += '</div>';
$('.s1 .swiper-wrapper').append(html);
Hope this helps, keep in mind that this code was meant for a website I made, so ur gonna have to change it a bit.

Sort table by column value before display jquery/js [duplicate]

This question already has answers here:
Sort array of objects by string property value
(57 answers)
Closed 6 years ago.
I was wondering if it's possible to sort the final table content, before inserting it into the html, by the value of the paying column. The code generating the table is the following
function populateJobMarket() {
var tableContent = '';
$.getJSON('modalRoutes/jobmarket', function(data){
$.each(data, function() {
var cName = this.companyName;
$.each(this.hiring, function(){
tableContent += '<tr class=\'target_row\'>';
tableContent += '<td>' + cName + '</td>';
tableContent += '<td>' + this.paying + '</td>';
tableContent += '<td> <button type=\'button\' class=\'btn btn-warning job_apply\' id=' + this._id + '> Apply </button></td>';
tableContent += '</tr>';
});
});
$('#jobMarket_pp #joblist table tbody').html(tableContent); // Sort it before this step
});
}
HTML Code:
<div class="modal fade" id="jobMarket_pp" tabindex="-1" role="dialog" aria-labelledby="jobMarket_pp">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="jobMarket_content" Job Offers</h4> </div> <div class="modal-body"> <div class='jobMarketAlert'></div>
<div id="joblist">
<table>
<thead>
<th>Company Name</th>
<th>Salary</th>
<th>Work</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You'll first need to flatten the data:
var new_data = [];
$.each(data, function() {
var companyName = this.companyName;
$(this.hiring).each(function(index, hire){
hire.companyName = companyName;
new_data.push(hire);
});
});
Then sort the new flattened data by paying:
new_data.sort(function(a, b) {
return a.paying < b.paying;
});
Now iterate over the data:
$.each($(new_data), function(){
tableContent += '<tr class=\'target_row\'>';
tableContent += '<td>' + this.companyName + '</td>';
tableContent += '<td>' + this.paying + '</td>';
tableContent += '<td> <button type=\'button\' class=\'btn btn-warning job_apply\' id=' + this._id + '> Apply </button></td>';
tableContent += '</tr>'
});
I also recommend using, instead:
$(new_data).each(function(hire)) {
tableContent += '<tr class=\'target_row\'>';
tableContent += '<td>' + hire.companyName + '</td>';
tableContent += '<td>' + hire.paying + '</td>';
tableContent += '<td> <button type=\'button\' class=\'btn btn-warning job_apply\' id=' + hire._id + '> Apply </button></td>';
tableContent += '</tr>'
});
Using this is JavaScript often leads to headaches, as it doesn't behave like this in other languages.

Categories