In the ProdRender.js I wanna combine those three functions into one so that i do not repeat and that should match to ProdData.js as the data is in the ProdData.js and its rendering through ProdRender.js
Could someone please suggest me how to do it without repeating anything in the prodRender.js The ProdData.js seems to be working fine as i'm not repeating anything only the prodRender.js is where i'm repeating thrice.
So please help me out here
Thanks
//ProdRender.js
function ProductDataRenderer() { }
ProductDataRenderer.prototype.render = function () {
var nzd =
'<table class="table table-striped">'
+' <thead>'
+' <tr><td colspan="3">Products (NZD)</td></tr>'
+' <tr>'
+' <td>Name</td>'
+' <td>Price</td>'
+' <td>Type</td>'
+' </tr>'
+' </thead>'
+ ' <tbody>';
var n = ProductDataConsolidator.get();
for (var i = 0; i < n.length; i++) {
nzd +=
'<tr>'
+ '<td>' + n[i].name +'</td>'
+ '<td>' + n[i].price + '</td>'
+ '<td>' + n[i].type + '</td>'
+ '</tr>';
}
nzd += '</tbody></table>';
document.getElementById("nzdProducts").innerHTML = nzd;
var usd =
'<table class="table table-striped">'
+ ' <thead>'
+ ' <tr><td colspan="3">Products (USD)</td></tr>'
+ ' <tr>'
+ ' <td>Name</td>'
+ ' <td>Price</td>'
+ ' <td>Type</td>'
+ ' </tr>'
+ ' </thead>'
+ ' <tbody>';
var u = ProductDataConsolidator.getInUSDollars();
for (var i = 0; i < u.length; i++) {
usd +=
'<tr>'
+ '<td>' + u[i].name + '</td>'
+ '<td>' + u[i].price + '</td>'
+ '<td>' + u[i].type + '</td>'
+ '</tr>';
}
usd += '</tbody></table>';
document.getElementById("usdProducts").innerHTML = usd;
var euro =
'<table class="table table-striped">'
+ ' <thead>'
+ ' <tr><td colspan="3">Products (Euro)</td></tr>'
+ ' <tr>'
+ ' <td>Name</td>'
+ ' <td>Price</td>'
+ ' <td>Type</td>'
+ ' </tr>'
+ ' </thead>'
+ ' <tbody>';
var e = ProductDataConsolidator.getInEuros();
for (var i = 0; i < e.length; i++) {
euro +=
'<tr>'
+ '<td>' + e[i].name + '</td>'
+ '<td>' + e[i].price + '</td>'
+ '<td>' + e[i].type + '</td>'
+ '</tr>';
}
euro += '</tbody></table>';
document.getElementById("euProducts").innerHTML = euro;
}
//ProdData.js
function ProductDataConsolidator() { }
ProductDataConsolidator.get = function (currency) {
var l = new LawnmowerRepository().getAll();
var p = new PhoneCaseRepository().getAll();
var t = new TShirtRepository().getAll();
const arr_names = [
[l, "lawnmower"],
[p, "Phone Case"],
[t, "T-Shirt"],
]
var products = [];
let multiplier = currency == "euro"
? 0.67
: currency == "dollar"
? 0.76
: 1;
for (let [arr,name] of arr_names){
for (var i = 0; i < arr.length; i++) {
products.push({
id: arr[i].id,
name: arr[i].name,
price: (arr[i].price * multiplier).toFixed(2),
type: name
});
}
}
return products;
}
ProductDataConsolidator.getInEuros = function(){
return ProductDataConsolidator.get("euro");
}
ProductDataConsolidator.getInUSDollars = function(){
return ProductDataConsolidator.get("dollar");
}
You need to break it down to smaller functions and parameterise them
const table = (currency, content) =>
`<table class="table table-striped">
<thead>
<tr><td colspan="3">Products (${currency})</td></tr>
<tr>
<td>Name</td>
<td>Price</td>
<td>Type</td>
</tr>
</thead>
<tbody>
${content}
</tbody>
</table>`
;
const table_content = data =>
data.map(({ name, price, type }) =>
`<tr>
<td>${name}</td>
<td>${price}</td>
<td>${type}</td>
</tr>`)
.join('\n')
;
const currencyCode = {
dollar: 'USD',
euro: 'Euro',
newZealand: 'NZD'
};
function ProductDataRenderer() { }
ProductDataRenderer.prototype.render = function (currency, target) {
const productData = ProductDataConsolidator.get(currency);
const html = table(currencyCode[currency], table_content(productData));
document.getElementById(target).innerHTML = html;
}
I didn't change the design of your code but you can see render does 3 different things. It should only render, not also retrieve data and inject the table in the DOM.
It makes also little sense to have one ProductDataConsolidator with three static methods having different names. Either you create 3 derivatives of ProductDataConsolidator with only one method get each and you pass an instance of the right derivative to render so that it only needs to know about one method named get (by the way if you have one object with only one method it's a function so why bother use an object), or you pass the product data directly to render (preferred)
Related
As all the 3 product functions has the same product list how can i combine these multiple functions into one so that i can avoid repeating myself here.
How to combine these three functions into one as all the functions has the product list only the currency are different? Could someone please suggest me. Thanks
function ProductDataRenderer() { }
ProductDataRenderer.prototype.render = function () {
var nzd =
'<table class="table table-striped">'
+' <thead>'
+' <tr><td colspan="3">Products (NZD)</td></tr>'
+' <tr>'
+' <td>Name</td>'
+' <td>Price</td>'
+' <td>Type</td>'
+' </tr>'
+' </thead>'
+ ' <tbody>';
var n = ProductDataConsolidator.get();
for (var i = 0; i < n.length; i++) {
nzd +=
'<tr>'
+ '<td>' + n[i].name +'</td>'
+ '<td>' + n[i].price + '</td>'
+ '<td>' + n[i].type + '</td>'
+ '</tr>';
}
nzd += '</tbody></table>';
document.getElementById("nzdProducts").innerHTML = nzd;
var usd =
'<table class="table table-striped">'
+ ' <thead>'
+ ' <tr><td colspan="3">Products (USD)</td></tr>'
+ ' <tr>'
+ ' <td>Name</td>'
+ ' <td>Price</td>'
+ ' <td>Type</td>'
+ ' </tr>'
+ ' </thead>'
+ ' <tbody>';
var u = ProductDataConsolidator.getInUSDollars();
for (var i = 0; i < u.length; i++) {
usd +=
'<tr>'
+ '<td>' + u[i].name + '</td>'
+ '<td>' + u[i].price + '</td>'
+ '<td>' + u[i].type + '</td>'
+ '</tr>';
}
usd += '</tbody></table>';
document.getElementById("usdProducts").innerHTML = usd;
var euro =
'<table class="table table-striped">'
+ ' <thead>'
+ ' <tr><td colspan="3">Products (Euro)</td></tr>'
+ ' <tr>'
+ ' <td>Name</td>'
+ ' <td>Price</td>'
+ ' <td>Type</td>'
+ ' </tr>'
+ ' </thead>'
+ ' <tbody>';
var e = ProductDataConsolidator.getInEuros();
for (var i = 0; i < e.length; i++) {
euro +=
'<tr>'
+ '<td>' + e[i].name + '</td>'
+ '<td>' + e[i].price + '</td>'
+ '<td>' + e[i].type + '</td>'
+ '</tr>';
}
euro += '</tbody></table>';
document.getElementById("euProducts").innerHTML = euro;
}
Hey this one should do the trick
const renderTable = ({ items, title, containerId }) => {
let tableTemplate =
'<table class="table table-striped">' +
' <thead>' +
` <tr><td colspan="3">${title}</td></tr>` +
' <tr>' +
' <td>Name</td>' +
' <td>Price</td>' +
' <td>Type</td>' +
' </tr>' +
' </thead>' +
' <tbody>'
for (let i = 0; i < items.length; i++) {
tableTemplate +=
'<tr>' +
`<td>${items[i].name}</td>` +
`<td>${items[i].price}</td>` +
`<td>${items[i].type}</td>` +
`</tr>`
}
tableTemplate += '</tbody></table>'
document.getElementById(containerId).innerHTML = tableTemplate
}
renderTable({
items: ProductDataConsolidator.get(),
title: 'Products (NZD)',
containerId: 'nzdProducts'
})
renderTable({
items: ProductDataConsolidator.getInUSDollars(),
title: 'Products (USD)',
containerId: 'usdProducts'
})
renderTable({
items: ProductDataConsolidator.getInEuros(),
title: 'Products (Euro)',
containerId: 'euProducts'
})
I get an ajax call response in which i get datetime in "2019-02-07T14:00:11.374+0530" format. I want to convert this as Feb-07-2019 14:00.
I try this as following but its showing current date, not ajax response date. How do i convert date coming from ajax response. I get datetime from ajax response by calling "starttime"
This my code
function format(driver_data) {
var a = '';
var b = '';
var i;
var ps = new Date();
ps = ps.toDateString() + " " + ps.getHours() + ":" + ps.getMinutes();
console.log(ps)
for (i = 0; i < driver_data.length; i++) {
a = '<table class="table table-striped table-bordered table-hover"style="padding-left:0px;">' + '<thead> <tr> <th>Trip Id</th> <th>Name</th> <th>Source</th> <th>Destination</th> <th>Date/Time</th> </tr> </thead>' + '<tbody>';
b = b + '<tr>' +
'<td>' + driver_data[i].d_tripid + '</td>' +
'<td>' + driver_data[i].employeename + '</td>' +
'<td>' + driver_data[i].srclocation + '</td>' +
'<td>' + driver_data[i].destlocation + '</td>' +
'<td>' ps'</td>' +
'</tr>';
}
var final = a + b + '</tbody></table>';
return final;
}
I have a popup modal like this one.
When I click 'ADD' button, all the data from popup's table is shown at the table of the parent's. Like this one.
The problem is that I don't want to show the plus sign "+", if there is no data in textbox2s.
Here is the code at popup.js
function add_to_prent_table(){
var popupTable = [];
var i = 0;
$('#testing > tbody > tr').each(function () {
popupTable[i] = [
$(this).find("#test_number").val(),
$(this).find("#type_1").val(),
$(this).find("#type_2").val(),
$(this).find("#place_1").val(),
$(this).find("#place_2").val(),
];
i++;
var newRow = '<tr>'+
'<td id ="td_center">'+
$(this).find("#test_piece_number").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#type_1").val() + ' + ' +
$(this).find("#type_2").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#place_1").val() + ' + ' +
$(this).find("#place_2").val() +
'</td>'+
'</tr>';
$('#testing_parent tbody').append(newRow);
});
}
How can I fix this?
It's messy but you can replace the first ' + ' with this:
$(this).find("#type_2").val() ? ' + ' : ''
And replace the second ' + ' with
$(this).find("#place_2").val() ? ' + ' : ''
Basically you're looking to see if #type_2 and #place_2 have values. If they do, add a ' + '. If not, add nothing.
Try this;
function add_to_prent_table() {
var popupTable = [];
var i = 0;
$('#testing > tbody > tr').each(function () {
var testNumber = $(this).find("#test_number").val();
var firstType = $(this).find("#type_1").val();
var secondType = $(this).find("#type_2").val();
var firstPlace = $(this).find("#place_1").val();
var secondPlace = $(this).find("#place_2").val();
popupTable[i] = [
testNumber,
firstType,
secondType,
firstPlace,
secondPlace,
];
i++;
var newRow = '<tr>' +
'<td id ="td_center">' +
$(this).find("#test_piece_number").val() +
'</td>' +
'<td id ="td_center">' +
firstType + secondType ? (' + ' + secondType) : '' +
'</td>' +
'<td id ="td_center">' +
firstPlace + secondPlace ? (' + ' + secondPlace) : '' +
'</td>' +
'</tr>';
$('#testing_parent tbody').append(newRow);
});
}
Simply you can add condition before adding plus sign like below,
var newRow = '<tr>'+
'<td id ="td_center">'+
$(this).find("#test_piece_number").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#type_1").val()
if($(this).find("#type_2").val() != "")
{
' + ' + $(this).find("#type_2").val()
}
'</td>'+
'<td id ="td_center">'+
$(this).find("#place_1").val()
if($(this).find("#place_2").val() != "")
{
' + ' + $(this).find("#place_2").val()
}
'</td>'+
'</tr>';
This is a simplified Bootstrap table created in JavaScript for a shopping cart. I have one row with four columns. The problem is when I open it in Chrome all the data for columns 2, 3 and 4 are all placed in column 1.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="productsList">
</div>
<script>
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
productsList.innerHTML += '<tr>' +
'<td><div><img style="width:200px; height:300px;" src="nopicture.jpg" /></div></td>' +
'<td>' +
'<h6 id="productname"> Nice Product</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs. 5000/=</div></td>' +
'<td><div id="productquantity">3</div></td>' +
'</tr>';
productsList.innerHTML += '</tbody>' +
'</table>';
</script>
</body>
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for(var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
productsList.innerHTML += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
productsList.innerHTML += '</tbody>' +
'</table>';
}
You can't append to the innerHTML of an element like that. When you do it the first time, Chrome tries to close out your table for you and make it valid HTML. The second+ time you are appending HTML after your table is closed with </table>. Put the HTML into a local variable instead and then assign innerHTML once at the end.
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
var content = '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for (var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
content += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
content += '</tbody>' + '</table>';
productsList.innerHTML = content;
}
I'm trying to toggle between the innerHTML of a table data cell from an AJAX output from onclick row event:
JS:
...
var thisrownumber = 0;
var detailednote = '';
var simplifiednote = '';
htmlStr += '<table>';
$.each(data, function(k, v){
thisrownumber ++;
detailednote = v.note_ids;
simplifiednote = '<img class="See" src="~.png" alt="See" style="width:20px; height:20px;"> See';
htmlStr += '<tr onclick="shrow(' + thisrownumber + ',' + detailednote + ',' + simplifiednote + ')">'
+ '<td>' + v.date + '</td>'
+ '<td>' + v.r + '</td>'
+ '<td>' + v.f + ': ' + v.s + '</td>'
+ '<td>' + '<span id="span_note' + thisrownumber + '">' + simplifiednote + '</span>'
+ '</td>'
+ '</tr>';
});
htmlStr += '</table>';
$("#content").html(htmlStr);
} // function close
function shrow(x,y,z){
var lang3 = "span_note";
var shrow = x;
var span_note = lang3.concat(x);
if(document.getElementById(span_note).innerHTML == y){
document.getElementById(span_note).innerHTML = z;
}
if(document.getElementById(span_note).innerHTML == z){
document.getElementById(span_note).innerHTML = y;
}
}
HTML:
<div id="content"></div>
Getting error:
Uncaught SyntaxError: missing ) after argument list